Warum Form-Tags mit meinem ngModel und Attributen verbingen? ngModel in ngFor intern Formular-Tag

Question

H e l l o!

Ich habe mehrere Kontrollkästchen, die ich mit ngModel in ngFor binden, aber wenn mein Markup in <form> eingewickelt ist, funktioniert die Benutzeroberfläche unerwartet. Zum Beispiel [checked]="team.original "und [disabled]="!group.internal" nicht Linie arbeiten sollte es

https://plnkr.co/edit/yxngdinXlHD1G9ITeGLT?p=preview

Danke

Edit:.!

Zum Beispiel sehen Sie [geprüft] =" Team .original "und [disabled] ="! group.internal "funktionieren sie nicht entsprechend ihrem Wert. Auch für die 'Original' Spalte drucke ich den tatsächlichen Wert - 'false' aber chackbox wird überprüft.

Answer 1

In Formularen müssen Namen eindeutig sein. In Ihrem Formular wird es also nicht als zwei verschiedene Teams bewertet, da das Namensattribut dasselbe ist. Hier in der Regel verwenden Sie den Index den Namen in Iteration zu unterscheiden, so:

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

und das name Attribut

name="read{{i}}" 

Sie ein weiteres Problem haben, da die teams sind in zwei verschiedenen Gruppen und jedes Team hat den Index 0 in ihrem separaten Array. Wenn Sie das oben genannte verwenden, würden Sie mit dem gleichen name Attribut enden.

read{{i}} würde am Ende read0 sein, die Ihr Problem immer noch nicht löst, da es als ein und derselbe Formularname ausgewertet werden würde. Daher müssen Sie zwei Indizes verwendet werden, sowohl für die Top-Level-Iteration und die verschachtelte Iteration:

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

und

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

und markieren Sie Ihre name Attribute:

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

JETZT alle Artikel in Ihrem Formular haben eindeutige Namen, so würde das Ergebnis Ihrer Formularwerte wie folgt aussehen:

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

So funktionieren Formulare. Alle Namen müssen eindeutig sein.

Ihre Plunker Hier ist gegabelt