Angular 2Angular 2 Data Driven Forms


Observaciones

this.myForm = this.formBuilder.group

crea un objeto de formulario con la configuración del usuario y lo asigna a la variable this.myForm.


'loginCredentials': this.formBuilder.group

método crea un grupo de controles que consisten en un nombre de control de formulario, por ejemplo. login y valor ['', Validators.required], donde el primer parámetro es el valor inicial de la entrada del formulario y secons es un validador o una matriz de validadores como en 'email': ['', [Validators.required, customValidator]],


'hobbies': this.formBuilder.array

Crea una matriz de grupos donde el índice del grupo es formGroupName en la matriz y se accede a él como:

<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)
    }))
  }

este método de muestra agrega nuevo formGroup a la matriz. El acceso actual requiere especificar el tipo de control al que queremos acceder, en este ejemplo, este tipo es: <FormArray>


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

Se aplican las mismas reglas que las anteriores para eliminar un control de formulario específico de la matriz

Angular 2 Data Driven Forms Ejemplos relacionados