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:

	<form [formGroup]="form" novalidate>
	<mat-form-field class="full-width">
	<mat-chip-list #chipList>
	<mat-chip *ngFor="let requirement of form.get('requirements').controls; let i = index;" [selectable]="selectable"
	[removable]="removable" (removed)="remove(i)">
	{{requirement.value}}
	<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
	</mat-chip>
	<input placeholder="New Requirement..."
	[matChipInputFor]="chipList"
	[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
	[matChipInputAddOnBlur]="addOnBlur"
	(matChipInputTokenEnd)="add($event)" />
	</mat-chip-list>
	</mat-form-field>
	<pre>{{form.value | json}}</pre>
	</form>

view raw mat-chip-list hosted with ❤ by GitHub

The TS component file: 

	import {Component, OnInit} from '@angular/core';
	import {FormGroup, FormBuilder, FormArray} from '@angular/forms';
	import {MatChipInputEvent} from '@angular/material';
	import {ENTER, COMMA} from '@angular/cdk/keycodes';
	@Component({
	selector: 'chip-test',
	templateUrl: './chip.component.html'
	})
	export class ChipComponent implements OnInit {
	form: FormGroup;
	//chips
	visible: boolean = true;
	selectable: boolean = true;
	removable: boolean = true;
	addOnBlur: boolean = true;
	// Enter, comma
	separatorKeysCodes = [ENTER, COMMA];
	constructor(private fb: FormBuilder) {
	this.createForm();
	}
	createForm(): void {
	this.form = this.fb.group({
	requirements: this.fb.array([])
	});
	}
	ngOnInit(): void {
	}
	add(event: MatChipInputEvent): void {
	let input = event.input;
	let value = event.value;
	// Add our requirement
	if ((value || '').trim()) {
	const requirements = this.form.get('requirements') as FormArray;
	requirements.push(this.fb.control(value.trim()));
	}
	// Reset the input value
	if (input) {
	input.value = '';
	}
	}
	remove(index: number): void {
	const requirements = this.form.get('requirements') as FormArray;
	if (index >= 0) {
	requirements.removeAt(index);
	}
	}
	}

view raw ChipComponent hosted with ❤ by GitHub

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