Reaktive Formulare: So fügen Sie eine neue FormGroup oder FormArray zu einem späteren Zeitpunkt in Angular 7 zu einer vorhandenen FormGroup hinzu




angular-reactive-forms formgroups (2)

Sie können einfach das FormArray anstelle eines FormControl .

this.form.addControl('arr',this.fb.array([]));

Bearbeiten: Vorhandenen Wert verwenden

Verwenden Sie diesen Befehl, um den Wert aus dem Array " authors verwenden:

authors.forEach(author => {
  (<FormArray>this.form.controls.arr).push(new FormControl(author));
});

ODER

this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))

In den anderen Beispielen bei StackOverflow gibt es viele Fragen zur Verwendung von FormGroups in FormArrays. Aber meine Frage ist das Gegenteil.

FormArrays haben eine Push-Methode, die vieles ermöglicht. FormGroups verfügen in der Tat über eine addControl-Methode zum Hinzufügen einfacher FormControls. Afaik FormGroups haben keine Methode addFormArray or addFormGroup . Deshalb brauche ich deine Hilfe.

Folgende Situation:

this.myForm = this.fb.group({
  id: this.fb.control([this.book.id]),
  // or short form `id: [this.book.id],`
});

Das Hinzufügen eines einfachen Steuerelements zu einem späteren Zeitpunkt ist einfach:

this.myForm.addControl('isbn', this.fb.control(this.book.isbn));

Wie sieht es aber mit dem Hinzufügen von FormArrays und FormGroups zu einer vorhandenen FormGroup aus? Zum Beispiel möchte ich das folgende Array und Objekt für diesen Zweck verwenden:

const authors  = ['George Michael', 'Aretha Franklin'];
const metaData = { description : 'Great Book', publication: 2019}

Ich möchte nur dann authorArray oder metaData hinzufügen, wenn sie existieren. Das ist der Grund, warum ich sie zu einem späteren Zeitpunkt hinzufügen möchte.

ps Bitte ignoriere die Validierungsregeln.


FormGroup addControl Methode addControl akzeptiert AbstractControl als Parameter. FormControl kann entweder ein FormControl oder ein FormArray oder eine andere FormGroup da sie alle AbstractControl .

class FormGroup extends AbstractControl
...
class FormControl extends AbstractControl
...
class FormArray extends AbstractControl

FormBuilder kann Ihnen beim FormBuilder solcher Steuerelemente mit den Methoden array() und group() helfen:

this.myForm = this.fb.group({
  id: this.fb.control([this.book.id]),
  authors: this.fb.array(['George Michael', 'Aretha Franklin']),
  metaData: this.fb.group({ description : 'Great Book', publication: 2019})
});

Sie können die Factory anschließend weiterhin zum Erstellen der benötigten Steuerelemente verwenden (unabhängig davon, um welche Art von Steuerelement es sich handelt):

this.myForm.addControl('authors', this.fb.array(['George Michael', 'Aretha Franklin']))
this.myForm.addControl('metaData', this.fb.group({ description : 'Great Book', publication: 2019}))