Estoy intentando crear un formulario para un usuario que permitirá que uno de los números de teléfono se asocie con el usuario. ¿Es esto posible con la implementación actual de formularios reactivos? Por ejemplo, me gustaría que el siguiente formulario aceptara potencialmente muchos números de teléfono. Mi implementación frontal mostraría el campo de número de teléfono y tendría un botón que permitiría agregar un campo de número de teléfono adicional.
userForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl('', Validators.required), phoneNumber: new FormControl('', Validators.required) });Mi solución de piratería sería
userForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl('', Validators.required), phoneNumber: new FormControl('', Validators.required), phoneNumber1: new FormControl(), phoneNumber2: new FormControl(), phoneNumber3: new FormControl(), phoneNumber4: new FormControl() });Podría suprimir los campos de teléfono adicionales hasta que se haga clic en el botón Agregar un número de teléfono adicional.
Lo que desea usar es un FormArray donde puede agregar nuevos controles de formulario dinámicamente:
constructor(private fb: FormBuilder) { } // build form this.userForm = this.fb.group({ numbers: this.fb.array([ new FormControl() ]) }); // push new form control when user clicks add button addNumber() { const control = <FormArray>this.userForm.controls['numbers']; control.push(new FormControl()) }Y luego tu plantilla:
<form [formGroup]="userForm" (ngSubmit)="submit(userForm.value)"> <div formArrayName="numbers"> <!-- iterate the array of phone numbers --> <div *ngFor="let number of userForm.controls.numbers.controls; let i = index" > <label>PhoneNumber {{i+1}} </label> <input formControlName="{{i}}" /> </div> </div> <button type="submit">Submit</button> </form>