☰

ng-repeat、ng-show (angular) を使用して動的に作成された入力を検証する方法 質問する

tag-icon • tag-icon javascript html angularjs validation grid
ng-repeat、ng-show (angular) を使用して動的に作成された入力を検証する方法 質問する

ng-repeat を使用して作成されたテーブルがあります。テーブルの各要素に検証を追加したいと考えています。問題は、各入力セルの名前がその上下のセルと同じであることです。値を使用して{{$index}}入力に名前を付けようとしましたが、HTML の文字列リテラルが正しく表示されているにもかかわらず、現在は機能しています。

現時点での私のコードは次のとおりです:

<tr ng-repeat="r in model.BSM ">
   <td>
      <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
   </td>
</tr>

from インデックスを削除してみました{{}}が、それでもうまくいきませんでした。現時点では、入力の検証プロパティは正しく機能していますが、エラー メッセージは表示されません。

何か提案はありますか?

編集：以下の素晴らしい回答に加えて、この問題をさらに詳しく説明したブログ記事があります。http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/

ベストアンサー1

質問がされて以来、Angular チームは入力名を動的に作成できるようにすることでこの問題を解決しました。

とAngular バージョン 1.3 以降これで次の操作を実行できます:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

デモ

Angular 1.3 では、フォーム検証のためのより強力なツールである ngMessages も導入されました。ngMessages でも​​同じテクニックを使用できます。

<form name="vm.myFormNgMsg" novalidate>
    <div ng-repeat="p in vm.persons">
      <input type="text" name="person_{{$index}}" ng-model="p" required>
      <span ng-messages="vm.myFormNgMsg['person_' + $index].$error">
        <span ng-message="required">Enter a name</span>
      </span>
    </div>
  </form>

おすすめ記事