Last but not least, we need to create a form component called add, which adds a new phone record. In Angular, there are two ways to build a form: template-driven forms and reactive forms. As the reactive form is a new feature of Angular, we will be implementing it. To put it simply, reactive forms provide for the control of form directives through code logic and not in partials. Let's check it out by implementing them for our phonebook app.
The new component files to be created are add.component.ts and its .html file, as follows:

import {
    Component,
    Output,
    EventEmitter
} from '@Angular/core';
import {
    PhonebookService
} from './phonebook.service';
import {
    FormControl,
    FormGroup,
    Validators
} from '@Angular/forms';
@Component({
    selector: 'add',
    templateUrl: './add.component.html'
})
export class AddComponent {
    @Output() onAdded = new EventEmitter < Object > ();
    public newRecordForm = new FormGroup({
        name: new FormControl(),
        phone_no: new FormControl(0, [Validators.required, Validators.minLength(10)])
    });
    constructor(private _pbService: PhonebookService) {
        this.resetForm();
    }
    resetForm() {
        this.newRecordForm.reset();
    }
    onSubmit() {
        if (this.newRecordForm.valid) {
            const payload = this.newRecordForm.value;
            this._pbService.postContactList(payload).subscribe((response) => {
                let newListData = response['data'];
                this.onAdded.emit(newListData);
                this.resetForm();
            })
        }
    }
}

In the preceding code, you may observe some new facets of Angular. They are explained as follows:

• FormControl and FormGroup: Importing the FormControl, which is a directive that takes model data as an input and creates an instance of form elements. These form elements can be aggregated or grouped using FormGroup.
• Validators: The class validators provide methods to validate the form elements. They are passed as a second optional argument to FormControl, to configure the validation of an element. It sets a Boolean property as valid, according to conditions applied.
• The Output and EventEmitter will be explained later. So once we have our code ready, let's create its template as follows:

<form [formGroup]="newRecordForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
        <label class="center-block">Name:
            <input class="form-control" formControlName="name">
        </label>
        <label class="center-block">Phone no:
            <input class="form-control" formControlName="phone_no" ngClass="">
        </label>
    </div>
    <input type="submit" name="submit">
</form>

In the preceding code, we can investigate if formGroup is a directive that takes the public variable as input that is newRecordForm. We have an event handler called ngSubmit with public method onSubmit. This method is responsible for saving the contact details to our server. The last requirement here is that we map the properties of newRecordForm to formControlName so that the code logic is mapped to appropriate elements in the template. Classes such as form-control are used for HTML elements and are just bootstrap classes for a basic design.