なぜフォームタグがngModelと属性バインドで混乱するのですか？フォームタグ内のngModel内

Question

H e l l o！

ngFor内でngModelとバインドするチェックボックスがいくつかありますが、マークアップがラップされている場合は<form>タグUIが予期せず動作します。たとえば [checked]="team.originalについて "と[disabled]="!group.internal"は、それが必要ラインを動作しません

https://plnkr.co/edit/yxngdinXlHD1G9ITeGLT?p=previewありがとう

編集：。！

たとえば、あなたが見ています[確認] =" チーム"元の"列には実際の値が表示されます - 「偽」ですがチャックボックスはチェックされています

Answer 1

フォームでは、名前は一意である必要があります。だからあなたのフォームでは、名前属性が同じであるため、2つの異なるチームとして評価されません。ここでは通常、あなたはそう、反復で名前を区別するためのインデックスを使用します。

*ngFor="let team of group['teams']; let i=index" 

とname属性

name="read{{i}}" 

teamsは、2つの異なるグループと各チームであるので、あなたは、一つのさらなる問題を持っていますそれぞれの配列にインデックス0があります。したがって、上記を使用すると、同じname属性になります。

read{{i}}は、最終的にはread0になりますが、これは問題の解決にはなりません。この問題は1つの同じフォーム名として評価されるためです。 NOWすべての項目を

name="read{{j}}{{i}}" 

：あなたのname属性を

<div *ngFor="let group of groups; let j=index"> 

と

<tr *ngFor="let team of group['teams']; let i=index"> 

とマーク：したがって、あなたはトップレベルの反復と、ネストされた反復のための二つの指標、両方を使用する必要がありますあなたのフォームには固有の名前があるので、フォームの値の結果は次のようになります：

{ 
    "read00": true, 
    "download00": true, 
    "original00": false, 
    "read10": true, 
    "download10": true, 
    "original10": true, 
    "contribute10": true, 
    "manage10": false 
} 

これはフォームの動作方法です。すべての名前は一意でなければなりません。ここで

は、あなたが「それが必要のように動作しません」何を意味するあなたのフォークPlunker