1

いくつかのフィールドを含むフォームがあります (ng-repeat でビルドするため、どれだけかわかりません)。送信ボタンに追加しました

ng-disabled=form.field.$invalid

「必須」のすべてのフィールドに追加されましたが、ng-disabled はこの最後のフィールドに対してのみ機能します。私のコード:

 <form name="form" novalidate>

            <div ng-repeat="q in questions">
                 <textarea name="answer" type="text"  ng-model="answers[$index]" required></textarea>


            </div>
            <button ng-disabled="form.answer.$invalid || form.answer.$pristine" type="submit" ng-click="submit(q)">'Submit'</button>
        </form>

ユーザーがすべてのフィールドを変更したことを確認するにはどうすればよいですか? ありがとう！

4

1 に答える 1

1

これは、すべての入力が同じ名前であるためです。したがって、フォーム コントローラー インスタンスによる動作には、名前を持つプロパティが 1 つだけありanswers、フォーム内のその名前を持つ最後の ng-model を指します。ng-attr-nameフォームのおそらく追加$indexおよび使用プロパティを使用して入力に別の名前を付ける代わりに$invalid、フォーム内の ng-model(s) の 1 つ (制約付き) が無効である限り、フォームは無効になります。フォーム コントローラーのキャッチオール プロパティであるため、フォームが無効になるまでボタンを無効にします。

<div ng-repeat="q in questions">
  <!-- Provide dynamic form names -->
  <textarea ng-attr-name="answer{{$index}}" type="text" 
            ng-model="answers[$index]" required></textarea>
 </div>
 <!-- Use form.$invalid -->
 <button ng-disabled="form.$invalid || form.$pristine"  
         type="submit" ng-click="submit(q)">Submit</button>


angular.module('app', []).controller('ctrl', function($scope) {
  $scope.questions = ["q1", "q2"]
  $scope.answers = {};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <form name="form" novalidate>

    <div ng-repeat="q in questions">
      <textarea ng-attr-name="answer{{$index}}" type="text" ng-model="answers[$index]" required></textarea>


    </div>
    <button ng-disabled="form.$invalid || form.$pristine" type="submit" ng-click="submit(q)">Submit</button>
  </form>
</div>

于 2014-12-29T21:35:25.470 に答える