Chip input using Reactive Form

The Chips component documentation from the angular material website, describes how to use the MatChipInput directive with a chip-list for adding or removing chips.

I'll show you how you can implement the same component using Reactive Form.

The HTML template:

The TS component file: 

As you can see, we use the FormBuilder class to simplify the form creation. We define our requirements as a FormArray within our FormGroup.

The requirements will be accessed in our template with this expression inside the *ngFor of <mat-chip></mat-chip>:

*ngFor="let requirement of form.get('requirements').controls; let i = index;"

In the ChipComponent class, the requirements array is accessed by using this expression:

this.form.get('requirements') as FormArray;

Thanks