1

angularjsを使用して、英数字のみの入力が必要なテキストボックスでクライアント側の検証を行っています。テキストボックスが空のままであるか、英数字以外の文字が入力されている場合、submitform は必要な 'false' を JS に送信しますが、問題は、英数字以外の文字自体 (スコープ内) を渡さないことです。

JSP ファイル:

    <form name="addressForm" method="post" 
ng-submit="submitform(addressForm.$valid)" novalidate>
    ..
    <input ng-model="address" type="text" 
**ng-pattern**="/^[a-zA-Z0-9 ]*$/" required="true"/>

JS ファイル:

$scope.submitform= function(isValid){
var inputAddr = $scope.address;
alert(inputAddr);  //coming as undefined
...

jsp の入力ボックス 'address' に英数字を入力すると、JS でのアラートでundefinedが返されます(おそらく、文字が非英数字であることをフィルタリングするパターンが原因です)。ng-pattern を削除すると、すべての入力が「期待どおり」であるかのように、submitForm が「true」を渡します。$scope.address にアクセスしたい理由は、「空」と「英数字以外」の検証で異なるエラー メッセージをチェックして評価し、表示するためです。

どんな助けでも大歓迎です!

4

2 に答える 2

6

モデルが有効でない場合、値はモデルに割り当てられません。ユーザーが入力した内容を確認したい場合は、$viewValue を確認する必要があります。

入力に ​​name 属性を追加する必要があるため、入力 html を次のように変更します。

<input ng-model="address" type="text" name="address"
ng-pattern="/^[a-zA-Z0-9 ]*$/" required="true"/>

そして、送信機能を次のように変更します

$scope.submitform = function(isValid) {
    console.log($scope.addressForm.address.$viewValue);  
}
于 2014-04-24T08:13:47.077 に答える
1

検証エラーが何であるかを知る必要があるようです。

$errorプロパティFormController(あなたの場合) をチェックして、addressFormどの検証が成功または失敗したかを確認できます。

たとえば、入力が空の場合、「必要な」検証は失敗し、この検証に失敗した入力を含む にaddressForm.$error.requiredなります。Array

「必要な」検証が成功した場合は、 にaddressForm.$error.requiredなりますfalse。

これを角度式で非常に簡単に使用できます。

<p ng-show="addressForm.$error.required">This field is required.</p>

$scopeまたは、ビューに関連付けられているオブジェクトを介してフォームにアクセスできます。

if ($scope.addressForm.$error.required) {
   // required validation failed
}

FormControllerとngModelControllerのドキュメントを確認してください。

于 2014-04-24T08:13:51.780 に答える