Setzen von Angular 2 FormArray in ReactiveForm?

Question

Es gibt bereits eine ähnliche Frage hier (Setting initial value Angular 2 reactive formarray), aber ich bin nicht mit der Antwort zufrieden oder vielleicht auf der Suche nach einer anderen Lösung.

Ich denke, der ganze Punkt von FormArray ist das Array von Objekten übergeben und es sollte die gleiche Anzahl von Komponenten erstellen. Aber in diesem obigen Beispiel, wenn Sie den bereitgestellten Plunker betrachten, wurde auch nach dem Bereitstellen von zwei Adressen-Objekten eine Adresse erstellt, da ihre leere Version bereits in ngOnInit() erstellt wurde.

Also meine Frage ist, wenn ich in ngOnInit() habe ich es wie diese Adressen: this._fb.array ([]) // leere Liste, dann wie sollte ich seinen Wert setzen, dass es dynamisch N Anzahl der Adressen erstellt von N Anzahl der Adressen in meinem TypeScript-Array?

Answer 1

Ich habe das gleiche Problem. Hier ist, wie ich es tun:

Wie Sie erwähnt haben, Sie initialisieren Formular Array wie folgt aus:

addresses: this._fb.array([]) 

dann innerhalb ngOnInit() (oder in meinem Fall ionViewDidLoad() - mit Ionic 2), Sie Führen Sie Ihre asynchrone Operation aus, um Ihre entfernte Datenbank zu erreichen und den Wert entweder über Versprechen oder beobachtbar zurückzubekommen (und abonnieren Sie das Observable). Dann patchValue für alle anderen Formular-Steuerelemente, die nicht formArray sind (setze setValue nicht, wenn du eine Formulargruppe und ein Formular-Array hast !!).

Für die formArray, dies zu tun:

this.yourForm.setControl('addresses', this.fb.array(data.addresses || [])); 

Wo data.addresses eine Reihe von Adressen ist (man sich aus der gleichen Form auf vorherige Operation erstellen.)

Hope this löst Ihre Frage gut wie meins :) FormArray ist mächtig, ich wünschte, es gäbe mehr Ressourcen, um uns beizubringen, wie man es richtig benutzt. Dieser Code

Answer 2

helfen Form Array-Wert zu setzen und entfernen .. bitte

import { FormArray, FormBuilder, FormGroup} from '@angular/forms'; 

export class SomeComponent implements OnInit { 

consutructor(public fb:FormBuilder) { } 

    public buildcollaboratorsGroup(fb:FormBuilder):FormGroup { 
     return fb.group({ 
          email:'', 
          role:'' 
       }); 
    } 

ngOnInit() { 
    public settingsForm: FormGroup = this.fb.group({ 
    collaborators:this.fb.array([this.buildcollaboratorsGroup(this.fb)]) 
    });  

    this.setFormArrayValue(); 
} 


    // I am trying set only one value if it's multiple use foreach   
    public setFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
     controlArray.controls[0].get('email').setValue('yourEmailId@gmail.com'); 
     controlArray.controls[0].get('role').setValue(2); 
    } 

    // I am trying remove only one value if it's multiple use foreach   
    public removeFormArrayValue() { 
     const controlArray = <FormArray> this.settingsForm.get('collaborators'); 
      controlArray.removeAt(0);   
    } 
}