Required validation not working on mat-chip-list

[Marc]

Chip list that I'm trying to get validation for and I'm not sure how to do it. I know that you would normally use a mat-error for a mat-chip-list but app-chips is called in a separate component called ChipsComponent.

html form where validation should occur

<form [formGroup]="addRemoveForm" novalidate>
<div class="col-md-12">
  <app-chips
    label="Entities"
    placeholder="Add Entity..."
    [options]="entityOptions"
    [selectedOptions]="selectedEntities"
    [hint]="
      entityListHasDisabledOptions === true
        ? 'Please remove this contact from any roles for an entity prior to removing their association to that entity.'
        : undefined
    "
    (onRemoved)="removeEntity($event)"
  >
  </app-chips>
</div>
</form>

ts for validation

export class DocumentDialog
addRemoveForm: FormGroup = new FormGroup(
{
  ......
  selectedEntities: new FormControl('', [Validators.required]),


},


Separate component called ChipsComponent where app-chips is called as a selector

@Component({


  selector: 'app-chips',


  templateUrl: './chips.component.html',


})


export class ChipsComponent implements OnInit, DoCheck {


  @Input() label = '';


  @Input() placeholder = '';


  @Input() options: Options[] = [];


  @Input() selectedOptions: Options[] = [];


  @Input() floatLabel: FloatLabelType = 'auto';


  @Input() hint!: string | undefined;

 

chips.component.html

<mat-form-field [floatLabel]="floatLabel">


  <mat-label>{{label}}</mat-label>


  <mat-chip-list #optionList aria-label="label">


    <mat-chip


      *ngFor="let item of selectedOptions"


      (removed)="onRemoved.emit(item)"


      [removable]="!item.disabled"


      [disabled]="item.disabled">


      {{item.text}}


      <mat-icon *ngIf="!item.disabled" matChipRemove>cancel</mat-icon>


    </mat-chip>


    <input


      #optionInput


      type="text"


      [placeholder]="placeholder"


      [formControl]="formControl"


      [matAutocomplete]="optionAutoComplete"


      [matChipInputFor]="optionList">


  </mat-chip-list>


  <mat-autocomplete


    #optionAutoComplete="matAutocomplete"


    (optionSelected)="selected($event.option.value)"


  >


    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">


      {{option.text}}


    </mat-option>


  </mat-autocomplete>


  <mat-hint *ngIf="hint">{{ hint }}</mat-hint>


</mat-form-field>


<mat-form-field [floatLabel]="floatLabel">


  <mat-label>{{label}}</mat-label>


  <mat-chip-list #optionList aria-label="label">


    <mat-chip


      *ngFor="let item of selectedOptions"


      (removed)="onRemoved.emit(item)"


      [removable]="!item.disabled"


      [disabled]="item.disabled">


      {{item.text}}


      <mat-icon *ngIf="!item.disabled" matChipRemove>cancel</mat-icon>


    </mat-chip>


    <input


      #optionInput


      type="text"


      [placeholder]="placeholder"


      [formControl]="formControl"


      [matAutocomplete]="optionAutoComplete"


      [matChipInputFor]="optionList">


  </mat-chip-list>


  <mat-autocomplete


    #optionAutoComplete="matAutocomplete"


    (optionSelected)="selected($event.option.value)"


  >


    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">


      {{option.text}}


    </mat-option>


  </mat-autocomplete>


  <mat-hint *ngIf="hint">{{ hint }}</mat-hint>


</mat-form-field>

[Keerthana Rajendran]

Hi Marc, 

 

Thanks for contacting Syncfusion support. 

 

Based on the query, we suspect that your requirement of validation is with mat-chip-list, and we request you to follow up with the below blogs for general queries. 

 

https://www.c-sharpcorner.com/forums/required-validation-not-working-on-matchiplist 

 

https://material.angular.io/components/chips/overview 

 

https://stackoverflow.com/questions/50835658/how-to-apply-required-validation-on-mat-chip-in-template-driven-form 

 

We would also like to let you know that we have a similar EJ2 Chip component and suggest you to have a glance on the below demo and UG links to know more details on this. 

 

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chips/default 

 

https://ej2.syncfusion.com/angular/documentation/chips/getting-started/ 

 

Please let us know if you have any queries with Syncfusion components. 

 

Regards, 

Keerthana R. 

[Anjani P]

same question

i want to add validation into this

<div class="row">

<label class="label col-xl-3 col-lg-3 col-md-4 col-sm-5 col-form-label fw-normal">Analytical Tags <span class="text-danger" *ngIf="filter == 'video' || contentDetails.content_category == 'Video'">*</span></label>

<div class="col-xl-6 col-lg-6 col-md-8 col-sm-7">

<mat-form-field class="example-chip-list" appearance="fill">

<mat-chip-list #chipList aria-label="Analytical Tags">

<mat-chip *ngFor="let tag of selected_tags" (removed)="remove(tag)">

{{tag}}

<button matChipRemove>

<nb-icon icon="close-outline"></nb-icon>

</button>

</mat-chip>

<input placeholder="New tag..." name="tagInput" id="tagInput" #tagInput [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)"

>

</mat-chip-list>

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">

<mat-option *ngFor="let tag of filteredTags | async" [value]="tag">

{{tag}}

</mat-option>

</mat-autocomplete>

</mat-form-field>

<mat-selection-list #tags="ngModel" [(ngModel)]="selected_tags" name="tags">

</mat-selection-list>

</div>

</div> like this type

<ng-container *ngIf="contentMetadataForm.submitted || (released_date.invalid && released_date.touched)">

<p class="caption status-danger" *ngIf="released_date.errors?.required">

Released Date is required!

</p>

</ng-container>

[Jafar Ali Shahulhameed]

Hi Anjani,

Thank you for reaching out to Syncfusion support.

We appreciate your inquiry regarding validation with the mat-chip-list. Kindly explore the following blogs for general queries,

https://stackoverflow.com/questions/49959928/angular-material-mat-chip-validation

https://stackoverflow.com/questions/53483323/angular-2-material-mat-chip-list-formarray-validation

https://stackoverflow.com/questions/51690334/required-input-in-form-mat-chip-list-in-angular-2

If you have any questions or concerns regarding Syncfusion components, please don't hesitate to reach out to us.

Regards,

Jafar