Angular material mat-chip-list with input not showing validation error

Question

I'm currently facing a strange issue with mat-chip-list with and inputs. I have a form group that has two form controls: contacts and name.

this.form = this.formBuilder.group({
    name: ['', [Validators.required]],
    contactIds: ['', [Validators.required]]
})

The view for this form looks like this:

<mat-form-field #contactsChipList>
    <mat-chip-list>
        <mat-chip *ngFor="let contact of contacts" [removable]="removable" (remove)="removeChipListItem(contact)">
            {{ contact.name | titlecase }} {{ contact.surname | titlecase }}
        <mat-icon matChipRemove *ngIf="removable"></mat-icon>
        </mat-chip>
        <input [matChipInputFor]="contactsChipList" placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-chip-list>
</mat-form-field>

Problem: When I remove all the elements from the input field, the parent form (formGroup) is marked as invalid but the error property of the formGroup does not contain any values. So the error never shows.

Other attempt: But when I use a normal an input element with a matInput attribute without a mat-chip-list the error is displayed properly when I remove the content of the input field.

Here's what the markup looks like in that case:

<div class="form-group">
    <mat-form-field>
        <input matInput placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-form-field>
</div>

Assumption: I now believe that the issue lies with the mat-chip-list element. I tried to look into: @Input()errorStateMatcher: ErrorStateMatcher but I am not sure how to use yet. Google hasn't been friendly with that search.

Has anyone experienced this issue? If you need clarifications, let me know.

Answer 1

You should add the validator in <mat-chip-list> and prevent invalid item adding as follows.

Component:

export class ExampleComponent {
    items = [];
    emailFormControl = new FormControl('', [Validators.email]);

    addItem(event) {
        if (this.emailFormControl.valid) {
            items.push(event.value)
        }
    }

    .
    .
    .
}

Template:

<mat-form-field>
    <mat-chip-list [formControl]="emailFormControl">
        .
        .
        .
    </mat-chip-list>
</mat-form-field>

Editted: It seems that you use FormGroup. You have to add ngDefaultControl to the mat-chip-list as follows. You can read a good explanation here.

<mat-form-field>
    <mat-chip-list ngDefaultControl [formControl]="form.controls.contactIds">
        .
        .
        .
        <mat-error *ngIf="form.controls.contactIds.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-chip-list>
</mat-form-field>