Looking for angular2 Keywords? Try Ask4Keywords

Angular 2Angular 2 datengesteuerte Formulare


Bemerkungen

this.myForm = this.formBuilder.group

erstellt ein Formularobjekt mit der Benutzerkonfiguration und ordnet es der this.myForm-Variablen zu.


'loginCredentials': this.formBuilder.group

Die Methode erstellt eine Gruppe von Steuerelementen, die aus einem formControlName bestehen, z. login und value ['', Validators.required], wobei der erste Parameter der Anfangswert der Formulareingabe ist und die Sekunden ein Validator oder ein Array von Validatoren wie in 'email': ['', [Validators.required, customValidator]],


'hobbies': this.formBuilder.array

Erstellt ein Array von Gruppen, bei dem der Index der Gruppe formGroupName im Array lautet und auf die wie folgt zugegriffen wird:

<div *ngFor="let hobby of myForm.find('hobbies').controls; let i = index">
   <div formGroupName="{{i}}">...</div>
</div>

onAddHobby() {
    (<FormArray>this.myForm.find('hobbies')).push(new FormGroup({
      'hobby': new FormControl('', Validators.required)
    }))
  }

Diese Beispielmethode fügt dem Array eine neue formGroup hinzu. Für den Zugriff muss derzeit der Typ des Steuerelements angegeben werden, auf den wir zugreifen möchten. In diesem Beispiel lautet dieser Typ: <FormArray>


removeHobby(index: number){
    (<FormArray>this.myForm.find('hobbies')).removeAt(index);
  }

Für das Entfernen eines bestimmten Formularsteuerelements aus dem Array gelten dieselben Regeln wie oben

Angular 2 datengesteuerte Formulare Verwandte Beispiele