2017-12-20 7 views
2

Ich versuche, eine Reihe von E-Mail mit kantiger 4 reagieren Form zu zeigen, und eine Reihe von meinen Eingaben binden, so in der Komponente ich dies schrieb:Winkel 4 Material zeigt formArrayName mit ngFor und ngModel

<li> 
<h4>Telephone</h4> 
<div class="lists" formArrayName="telephones"> 
    <mat-form-field *ngFor="let telephone of userData.telephones; let i = index"> 
    <input matInput [(ngModel)]="telephone"> 
    </mat-form-field> 
</div> 
</li> 

I muss ein Telefonnummer Array zeigen und ich möchte seine Felder mit ngModel editierbar machen.

Ich habe eine Menge Dinge ausprobiert: eine FormArrayName Lösung mit [FormGroupName] = "Index" und FormControlName = "", aber es hat nicht funktioniert. Auch ein ngModel mit ngFor-Lösung, das einen eindeutigen Namen erfordert.

Antwort

3

Mischen Sie keine reaktiven Formen mit einer Vorlage. Wählen Sie beides. Da Sie mit einem Array arbeiten, verwenden Sie ein reaktives Formular. Scheint, dass Ihr Array vom primitiven Typ ist, was bedeutet, dass Sie die Werte direkt zuweisen können, ohne das Array zu durchlaufen.

constructor(private fb: FormBuilder) { 
    this.myForm = this.fb.group({ 
    telephones: this.fb.array(this.userData.telephones) 
    }); 
    // if receiving data at a later point, use below instead 
    //this.myForm.setControl('telephones', this.fb.array(this.userData.telephones)) 
} 

und dann einfach in Ihrer Vorlage Formular Array iterieren (hier ohne Winkelmaterial):

<div formArrayName="telephones"> 
    <div *ngFor="let tel of myForm.controls.telephones.controls; let i = index"> 
    <input [formControlName]="i" /> 
    </div> 
</div> 

StackBlitz

+0

vielen Dank !! es funktioniert!! ja, ich mischte reaktive Formen mit Vorlage getrieben. Ich lerne immer noch !! Noch eine Sache, wie kann ich die Werte direkt in die reaktive Form setzen ?? danke nochmal !! – Chiien

+0

Was meinst du * Werte direkt in reaktive Form * setzen? Wenn Sie meinen, Werte in Ihrem Array zu setzen, habe ich das getan, sonst können Sie auch Werte für alle Formularsteuerelemente festlegen: https://stackblitz.com/edit/angular-1mavrl?file=app/appcomponent.ts – Alex

Verwandte Themen