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
Comments
Post a Comment