Angular Model-Driven (Reactive) Forms

Estimated study time: 10 minutes. Building scalable, testable forms entirely from your component class.

Reactive Forms (also called model-driven forms) define the entire form structure and validation logic in the component class, using an explicit, immutable model of the form's state.

Setting Up Reactive Forms

Import ReactiveFormsModule in your module or standalone component before using reactive form APIs.

@NgModule({ imports: [ReactiveFormsModule] })
export class AppModule {}

Using FormBuilder

FormBuilder is a convenience service that reduces the boilerplate of creating FormGroup and FormControl instances by hand.

constructor(private fb: FormBuilder) {}

profileForm = this.fb.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  address: this.fb.group({
    city: [''],
    zip: ['']
  })
});

Working with FormArray

FormArray manages a dynamic list of controls, such as an editable list of phone numbers or skills.

skills = this.fb.array([this.fb.control('')]);

addSkill() {
  this.skills.push(this.fb.control(''));
}

removeSkill(index: number) {
  this.skills.removeAt(index);
}

<div formArrayName="skills">
  <input *ngFor="let skill of skills.controls; let i = index" [formControlName]="i">
</div>

Reading and Reacting to Value Changes

this.profileForm.get('firstName')?.valueChanges.subscribe(value => {
  console.log('First name changed to', value);
});

Submitting the Form

onSubmit() {
  if (this.profileForm.valid) {
    console.log(this.profileForm.value);
  } else {
    this.profileForm.markAllAsTouched();
  }
}