Reactive forms

We briefly touched on reactive forms earlier; now let's take a deeper look at these. For complex cases that demand more control over the form, the reactive style comes in handy.

In the template-driven example, we explored building forms with validations to capture email and phone inputs. This was mostly done by using directives such as ngForm and ngModel in the template. In the reactive style, we take a programmatic approach when working with forms.

Setting up forms with FormBuilder

In the earlier reactive example seen, we built the FormGroup and FormControl instances without using a FormBuilder. A more convenient option is to make use of the FormBuilder which leads to setup code like the following, which is simpler to read:

constructor(fb: FormBuilder) { 
    this.formGroup = fb.group({
      email: null,
      phone: null
    });
}

Arguably, the benefits of a builder aren't evident if you have only one or two controls. A builder adds syntactical convenience, which you do require...