web-dev-qa-db-ja.com

Angular ngFor入力を持つ2つのテンプレート駆動型フォーム

テンプレート駆動型フォームでngForを使用して入力フィールドを作成し、＃name = "ngModel"のようなものを使用して別のタグでname.validを使用することは可能ですか？

現在、数量フィールドと表のカートに追加ボタンを持つ動的な製品リストがあります。このように最後にすべて追加ボタンを使用して、全体をフォームにしたいです。

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

しかし、ngModelの行ごとに新しい変数名を生成するにはどうすればよいですか？

formsangularngfor
15
Jeppz

これは必要ありません。次のようにしてください。

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               validateQuantity
               #qtyInput>
        <button (click)="addItemToCart(item)"
                [disabled]="!qtyInput.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

角度の部分はこちら。 :)

23
mxii

mxii答えは、ngForによって動的に作成されたフォーム項目に対して期待どおりに機能しますが、ngForm、および独立したエンティティ（コメントのリストなど、ユーザーが各コメントに返信できる必要がある）を持つアイテムのリストを反復処理する場合は、 テンプレート参照変数 which Input要素を簡単に取得して操作できるようにします。

方法は次のとおりです。

// Your template
<div *ngFor="item in items">
  <!-- Your input -->
  <input #itemInput type="number">

  <button (click)="addItemToCart(itemInput.value)"
          [disabled]="!itemInput.value">Add to cart</button>
</div>

入力フィールドに割り当てられた変数への参照を提供します。ここで、上記の例では、入力フィールドの値になるitemInput.valueを渡しました。入力フィールドへの参照が必要な場合があります（データを取得したらその値を削除することにしましょう）、itemInputを渡すだけで、HTMLInputElementおよびそのデータにアクセスします。

1
M98

formModuleをapp.module.tsに追加して、少なくとも新しいバージョンのAngularで双方向のバインディングを機能させる必要があります

Angular 4-"「input」の既知のプロパティではないため、「ngModel」にバインドできません」エラー

0
gischy