angular reactive nested form groups 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]),
  }),
  ...
});