make mat-chip-list required and validatable

Viewed 801

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:

  1. the required do not recognize when item get added to the chip-list
  2. the validator do not validate wether there is an item in the chip-list or not

enter image description here

On research I do not found any advice how to handle required and validation for mat-chip-list.

0 Answers
Related