81

私はこのメソッドを使用しています: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=previewぼかしのフィールドのみを検証します。これは正常に動作しますが、ユーザーが「送信」ボタンをクリックしたときにそれらを検証したいと思います (したがって、これらのフィールドのエラーがあれば表示します) (実際の送信ではなく、関数への data-ng-click 呼び出し)。

そのボタンをクリックしたときに、すべてのフィールドの検証を再度トリガーする方法はありますか?

4

13 に答える 13

18

誰かが後でこれに戻ってきた場合に備えて...上記のどれも私にとってはうまくいきませんでした。そこで、角度のあるフォーム検証の根幹を掘り下げ、特定のフィールドでバリデーターを実行するために呼び出す関数を見つけました。このプロパティは便宜的に と呼ばれ$validateます。

名前付きの form がある場合は、myFormプログラムで呼び出しmyForm.my_field.$validate()てフィールドの検証を実行できます。例えば：

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

呼び出し$validateはモデルに影響を与えることに注意してください。ngModelCtrl.$validate の angular ドキュメントから:

登録された各バリデータ (最初に同期バリデータ、次に非同期バリデータ) を実行します。有効性が無効に変更された場合、ngModelOptions.allowInvalid が true でない限り、モデルは未定義に設定されます。有効性が有効に変更された場合、モデルは最後に利用可能な有効な $modelValue、つまり最後に解析された値またはスコープから設定された最後の値のいずれかに設定されます。

したがって、無効なモデル値を使用して何かを行う予定がある場合 (そのように伝えるメッセージをポップするなど)、 モデルに対してallowInvalidが設定されていることを確認する必要がありtrueます。

于 2016-03-16T22:55:45.043 に答える
12

Angular-Validatorを使用して、必要なことを行うことができます。バカバカしい使い方です。

そうなる：

  • $dirtyまたは上のフィールドのみを検証しますsubmit
  • フォームが無効な場合、フォームが送信されないようにする
  • $dirtyフィールドまたはフォームの送信後にカスタム エラー メッセージを表示する

デモを見る

例

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

フィールドが合格しない場合validator、ユーザーはフォームを送信できません。

詳細については、 angular-validator の使用例と例を確認してください。

免責事項: 私は Angular-Validator の作成者です

于 2014-08-08T03:45:14.420 に答える
9

1 つの方法は、すべての属性を強制的にダーティにすることです。各コントローラーでそれを行うことができますが、非常に面倒です。一般的な解決策を持っている方が良いでしょう。

私が考えることができる最も簡単な方法は、ディレクティブを使用することでした

  • フォーム送信属性を処理します
  • すべてのフォームフィールドを繰り返し処理し、元のフィールドにダーティマークを付けます
  • 送信機能を呼び出す前に、フォームが有効かどうかを確認します

ここにディレクティブがあります

myModule.directive('submit', function() {
  return {
    restrict: 'A',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind('submit', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === 'string' && !name.match('^[\$]')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

次に、フォームの html を更新します。たとえば、次のようにします。

 <form ng-submit='justDoIt()'>

になります：

 <form name='myForm' novalidate submit='justDoIt()'>

ここで完全な例を参照してください: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview

于 2013-07-24T04:18:26.453 に答える
2

Thilakの回答に基づいて、この解決策を思いつくことができました...

私のフォームフィールドは、フィールドが無効で、ユーザーが触れた場合にのみ検証メッセージを表示するため、ボタンによってトリガーされたこのコードを使用して、無効なフィールドを表示することができました。

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
  angular.forEach(error, function(field) {
    field.$setTouched();
  });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
  isValid = false;
}
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

  <!-- field label -->
  <label class="control-label">Suffix</label>
  <!-- end field label -->
  <!-- field input -->
  <select name="Parent_Suffix__c" class="form-control"
          ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
          ng-model="rfi.contact.Parent_Suffix__c" />
  <!-- end field input -->
  <!-- field help -->
  <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
    <span ng-message="required">this field is required</span>
  </span>  
  <!-- end field help -->
</div>
<!-- end form field -->

于 2015-09-11T23:50:08.077 に答える
0

ボタンのクリック時に検証を処理するこのアプローチが気に入っています。

  1. コントローラーから何も呼び出す必要はありません。

  2. すべてディレクティブで処理されます。

githubで

于 2013-09-20T16:18:41.390 に答える
0

必要なときにフォームのすべてのフィールドを検証するには、次のように $$controls の各フィールドで検証を行います。

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});
于 2018-03-20T13:19:12.713 に答える
0

これを試すことができます：

// The controller

$scope.submitForm = function(form){
   		//Force the field validation
   		angular.forEach(form, function(obj){
   			if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
   			{ 
   				obj.$setDirty();
   			}
   		})
        
        if (form.$valid){
		
			$scope.myResource.$save(function(data){
		     	//....
			});
		}
}
<!-- FORM -->

  <form name="myForm"  role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
      <label for="field1">My field 1</label>
        <span class="nullable"> 
        <select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
          class="form-control input-sm" required>
            <option value="">Select One</option>
        </select>
        </span>
        <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
  </div>
    
<!-- FORM GROUP to field 2 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
    <label class="control-label labelsmall" for="field2">field2</label> 
      <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
      class="form-control input-sm" required>
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
  </div>

  </form>

<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>

于 2015-07-30T15:43:37.540 に答える