nested form group in angular reactive forms code example
Example 1: formbuilder multiple groups
export class FormBuilderComp {
addUserFrom: FormGroup;
constructor( @Inject(FormBuilder) fb: FormBuilder) {
this.addUserFrom = fb.group({
userGroup: fb.group({
name: ['', Validators.required],
email: ['', Validators.required],
phone: ['', Validators.required]
}),
addressGroup: fb.group({
street: ['', Validators.required],
suite: ['', Validators.required],
city: ['', Validators.required],
zipCode: ['', Validators.required]
})
});
}
}
Example 2: reactive form nested form group
// Reactive Forms Nested formControls
yourFormName: FormGroup = new FormGroup({
pet: new FormGroup({
name: new FormControl('', [Validators.required]),
age: new FormControl('', [Validators.required]),
}),
...
});