I try to make mat-chip-list required and validatable inside a <mat-form-field>.
HTML
<mat-form-field appearance="standard" class="form-field-large">
<mat-label>Software to install</mat-label>
<mat-chip-list #chipList aria-label="Software selection" formControlName="items" required>
<mat-chip *ngFor="let item of this.ItemsList" [selectable]="this.Selectable" [removable]="this.Removable" (removed)="itemRemove(item)">
{{item}}
<mat-icon matChipRemove *ngIf="this.Removable">cancel</mat-icon>
</mat-chip>
<input placeholder="add software..." #ItemsInput [formControl]="this.ItemsCtrl" [matAutocomplete]="this.ItemsAutocomplete" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="this.KeysCodes" (matChipInputTokenEnd)="itemAdd($event)">
</mat-chip-list>
<mat-autocomplete #ItemsAutocomplete="matAutocomplete" (optionSelected)="itemSelected($event)">
<mat-option *ngFor="let item of this.ItemsFilter | async" [value]="item">
{{item}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
TS Validator
ngOnInit(): void {
// form playbook
this.FormPlaybook = this.formBuilder.group({
items: ['', Validators.required],
});
}
Unfortunately the behavior of the mat-chip-list is not like expected:
- the
requireddo not recognize when item get added to thechip-list - the
validatordo not validate wether there is an item in thechip-listor not
On research I do not found any advice how to handle required and validation for mat-chip-list.
