So far, we have been creating our forms like this:

const form = new FormGroup({
  name: new FormControl(''),
  surname: new FormControl(''),
  age: new FormControl,
  address: new FormGroup({
    city: 'London',
    country: 'UK'
  }) 
})

This, however, constitutes a lot of noise. We can use a construct called FormBuilder to take away a lot of that noise. To use the FormBuilder we need to do the following:

1. Import it from @angular/forms.
2. Inject it into the constructor.
3. Use the instance and call the group function on the FormBuilder instance.

Let's showcase this in the following code snippet:

import { FormBuilder } from '@angular/forms'

@Component({
})
export class FormComponent {
  formGroup: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      name :'',
      surname :'',
      age: 0,
      address : this.formBuilder.group({
        city: 'London',
        country : 'UK'
      })
    });
  }
}

This looks a lot easier to read and we don't have to deal with the FormGroup and FormControl data types explicitly, although that is what is being created implicitly. 

There are three different ways of specifying a value to our element:

• elementName : '', here the default value is being set to a primitive
• elementName: { value : '',  disabled: false }, here we assign the elementName to an entire object, where the property value in the object is what the default value will become
• elementName : [ 'default value', <optional validator> ], here we assign it a complete array with the first item in the array being the default value and the second to Nth values being the validators

Here is what the code looks like using all three approaches:

this.dynamicForm2 = this.formBuilder.group({
  // set to a primitive
  fullname: 'chris',
  // setting a default value
  age: { value : 37, disabled: true },
  // complex type 'address'
  address : this.formBuilder.group({
    // default value + x number of validators
    city: ['', Validators.required, Validators.minLength], 
    country: [''] // default value, no validators
  })
});

Here, we are rendering out the mentioned field in our preceding backing code. As you can see, the key names in the group object correspond to the formControlName attribute in the markup:

<form (ngSubmit)="submit(dynamicForm2)" [formGroup]="dynamicForm2">
  <input formControlName="fullname">
  <input formControlName="age">
  <div formGroupName='address'>
    <input formControlName="city">
    <input formControlName="country">
  </div>
  <button>Save</button>
</form>

How do we show a specific error though? That's an easy one, it looks like this:

<div *ngIf="dynamicForm2.get('address').hasError('required')">

Note how we refer to the form by its property name on the class dynamicForm2, we call the get() method and specify the key as an argument, and lastly, we call hasError and ask for a specific error. In this particular case, the address property is defined in the code as consisting of city and country. Specifying an error like this would just tell us that either city or country has an error on it, or both.