Validation error not displaying in Angular Material's mat-chip-list with input component

Question

Validation error not displaying in Angular Material's mat-chip-list with input component

I'm currently encountering a peculiar problem with using mat-chip-list with inputs. My form group consists of two form controls: contacts and name.

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

The layout of this form is as follows:

<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>

Issue: When I clear all the elements from the input field, the parent form (formGroup) is flagged as invalid, but the error property of the formGroup remains empty. As a result, the error message is not displayed.

Alternative Attempt: However, when I utilize a standard input element with a matInput attribute instead of a mat-chip-list, the error is properly shown upon clearing the field.

Here is the markup for this scenario:

<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 suspect the issue is related to the mat-chip-list element. I have attempted to investigate the following:

@Input()errorStateMatcher: ErrorStateMatcher

but I am unsure how to implement it. Unfortunately, my online searches have not been very helpful.

Has anyone else faced a similar problem? Feel free to ask for further clarification.

angular typescript angular-material2

Answer 1

Answer №1

You need to include the validator within the <mat-chip-list> element to prevent adding invalid items. Here's how you can do it:

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>

Edited: It appears that you are using a FormGroup. Make sure to add ngDefaultControl to the mat-chip-list element. You can find more information 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>

Answer 2

You need to include the validator within the <mat-chip-list> element to prevent adding invalid items. Here's how you can do it:

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>

Edited: It appears that you are using a FormGroup. Make sure to add ngDefaultControl to the mat-chip-list element. You can find more information 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>

Validation error not displaying in Angular Material's mat-chip-list with input component

Answer №1

Similar questions

Unable to employ the inequality operator while querying a collection in AngularFire

Angular2 - Leveraging data to dynamically control radio buttons

Encountering a sign-in issue with credentials in next-auth. The credential authorization process is resulting in a

When we mention TypeScript and CDK, we are actually talking about the very foundation

Angular is having trouble with the dropdown feature when using Semantic UI

eslint warning: the use of '$localize' is flagged as an "Unsafe assignment of an `any` value"

What is the method to transfer the outcome of a GET request into a POST request?

Is it possible to load the surrounding markup in Angular before the guards are resolved upon the initial load of the router-outlet?

Error TS2694 is being caused by Electron Typescript Material-UI withStyles because the namespace "".../node_modules/csstype/index"" does not have an exported member called 'FontFace'

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Angular website showing only app.component.html on the frontend

Guide on creating a detailed list of categories mapped to specific classes that all adhere to a common generic standard

ConfirmUsername is immutable | TypeScript paired with Jest and Enzyme

Interacting with the Dropdown feature on the page causes the body of the page to shift

Managing database downtime with TypeORM

Adding a scss file to the library build using Angular CLI

Is it possible to write TypeScript and execute it directly with Node?

unexpected behavior with the mat-checkbox control

Discover how to access JSON data using a string key in Angular 2

Trouble viewing information on initial try