Reactive Forms in Angular Interview Questions

Q1. How do you create a reactive form?

Import ReactiveFormsModule.
In component, create FormGroup.
Example:

profileForm = new FormGroup({
  firstName: new FormControl(''''),
  lastName: new FormControl('''')
});

In template:

Q2. How do you add validation in reactive forms?

Add validators when creating FormControl.
Example:

email: new FormControl('''', [Validators.required, Validators.email])

Then show errors:

Error

Q3. How do you create nested FormGroups?

Nest FormGroup instances.
Example:

profileForm = new FormGroup({
  name: new FormGroup({
    first: new FormControl(''''),
    last: new FormControl('''')
  })
});

Template:

Q4. How do you use FormArray?

FormArray holds an array of controls.
Useful for dynamic lists.
Example:

aliases = new FormArray([new FormControl('''')]);
addAlias() { this.aliases.push(new FormControl('''')); }

Template:

Q5. How do you observe value changes in reactive forms?

FormControl, FormGroup, and FormArray have valueChanges observable.
Example:

this.profileForm.valueChanges.subscribe(value => { ... });
this.profileForm.get(''email'').valueChanges.subscribe(email => { ... });

Quipoin Menu