6

親フォームとして ng-form を使用し、ng-repeat による検証のために子 mg-forms を使用しています。

<div ng-form="form">
    <div ng-repeat="field in fields">
        <div ng-form="subform"><input...></div>
    </div>
</div>

そして、次のように検証します。

if ($scope.form.subform.$invalid && !$scope.form.subform.$error.required) {
    // Do something...
}

(これは非常に単純化された例です。さまざまな入力タイプとさまざまな名前のさまざまなサブフォームがあります。たとえば、input[text] は TextForm という名前で、input[numeric] は NumericForm などです。)

フィールドにのみある場合、すべてが期待どおりに機能します。ただし、ng-repeat が複数のフィールドを生成する場合、検証は最後のサブフォームのみをトリガーし、他のサブフォームは無視されます。

すべてのサブフォームを循環して、それらのいずれかが無効かどうかを確認する方法はありますか?

また、次のように未記入の必須フィールドをすべてマークしています。

if ($scope.form.$error.required) {
     angular.forEach($scope.form.$error.required,
         function (object, index) {
             $scope.form.$error.required[index].$setDirty();
         }
     );
}

したがって、私のフィールドが次のようになっている場合:

....ng-form="TextForm" ng-class="{ 'has-error': TextForm.$dirty && TextForm.$invalid }"....

また、同じ名前の同じサブフォームが多数ある場合でも、すべてのサブフォームをマークします。

無効なフィールドで同様のことができるでしょうか？いろいろ試してみても、どれもうまくいきませんでした...

4

1 に答える 1

2

これに対する解決策は、のエラーを各入力ngModelControllerの変数に割り当てるディレクティブを作成することです。ng-repeat

以下は、各サブフォームのエラーを取得するための可能な実装です。 デモ

JAVASCRIPT (ディレクティブ)

  .directive('ngModelError', function($parse, $timeout) {
    return {
      require: ['ngModel', 'form'],
      link: function(scope, elem, attr, ctrls) {
        var ngModel = ctrls[0],
            ngForm = ctrls[1],
            fieldGet = $parse(attr.ngModelError),
            fieldSet = fieldGet.assign,
            field = fieldGet(scope);

        $timeout(function() {
          field.$error = ngModel.$error;
          field.ngForm = ngForm;
          fieldSet(scope, field);
        });

      }
    };
  });

HTML

<form name="form" ng-submit="submit(form, fields)" novalidate>
  <div ng-form="subForm" ng-repeat="field in fields"
    ng-class="{'has-error': subForm.$invalid && form.$dirty}">
    <label class="control-label">{{field.label}}</label>
    <input type="{{field.type}}" placeholder="{{field.placeholder}}" 
      ng-model="field.model" name="field" 
      ng-required="field.isRequired" class="form-control" 
      ng-model-error="field" />
  </div>
  <br>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JAVASCRIPT (コントローラー)

フィールドの構造に注意してください。

  .controller('Ctrl', function($scope) {
    $scope.fields = {
      email: {
        type: 'email',
        placeholder: 'Enter email',
        isRequired: true,
        label: 'Email Address'
      }, 

      password: {
        type: 'password',
        placeholder: 'Enter password',
        isRequired: true,
        label: 'Password'
      }
    };

    $scope.submit = function(form, fields) {
      form.$dirty = true;

      if(form.$valid) {
        // do whatever
      } else {
        // accessing ngForm for email field
        console.log(fields.email.ngForm);
        // accessing errors for email field
        console.log(fields.email.$error);

        // accessing ngForm for password field
        console.log(fields.password.ngForm);
        // accessing errors for password field
        console.log(fields.password.$error);
      }
    };
  })
于 2014-08-07T13:15:18.673 に答える