I am attempting to create a form for a user that will allow one to may phone numbers to be associated with the user. Is this possible with the current implementation of reactive forms? For example, I would want the below form to accept potentially many phone numbers. My front end implementation would show the phone number field, and would have a button that would allow for an additional phone number field to be added.
userForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl('', Validators.required),
phoneNumber: new FormControl('', Validators.required)
});
My hack solution would be
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()
});
I could suppress the additional phone fields until the add an additional phone number button is clicked.
Binding FormArray to Template We use the formArrayName directive to bind the skills form array to the div element. Now the div and anything inside the div element is bound to the skills form array. Inside the div use ngFor to loop through each element of skills FormArray.
In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes.
You can use [(ngModel)] with Reactive forms. This will a completely different directive than the one that would be used without the formControlName . With reactive forms, it will be the FormControlNameDirective . Without the formControlName , the NgModel directive would be used.
To fetch the value of a form control, we have to use value property on the instance of FormControl in our class. In the same way we can fetch the value in HTML template. city = new FormControl('Noida'); console. log(this.
What you want to use is a FormArray
where you can add new Form Controls dynamically:
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())
}
And then your template:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With