Can't submit form with mat-chip-list elements, even though they are present. How to send the tag array? Please assist!
View my form here
Here is the code I have so far:
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let tag of Tags"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(tag)">
{{tag}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="tags"
[formControl]="tagsSet"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
removable = true;
addOnBlur = false;
separatorKeysCodes: number[] = [ENTER, COMMA];
Tags: string[] = [];
this.testSuiteForm = new FormGroup({
tagsSet: new FormControl(null, [Validators.required]),
});
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our tag
if ((value || '').trim()) {
this.Tags.push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
this.tagsSet.setValue(null);
}
remove(Tags: string): void {
const index = this.Tags.indexOf(Tags);
if (index >= 0) {
this.Tags.splice(index, 1);
}
}
get tagsSet() {
return <FormArray>this.testSuiteForm.get('tagsSet');
}