Need help on using required validation on a mat-chip-list

Anyway I have a form where I want to use required validation on a mat-chip-list. The issue is that the mat-chip-list component is in different file as a template to be used for all forms in the solution. How do I create required validation from that template into the field on the form that needs validation.

The field in the form is called Entities. It is a dropdown list.

<app-modal [title]="title" [onOkClick]="onSave" [okDisabled]="addRemoveForm.invalid">
 <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>
</app-modal>

This is the template file that contains the mat-chip-list. You can see I have a string property called required (in typescript file) for . Tried to make it similar to hint but not sure if that is the right way to go. I want to bring the required validation from this component to the Entities component in the form code above.

<mat-form-field [floatLabel]="floatLabel">
<mat-label>{{ label }}</mat-label>
<mat-chip-list #optionList aria-label="label" required>
<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-error *ngif="required"> {{ required }}</mat-error>
 </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>

This is the on save method in typescript for the dropdown. You can see how selectedEntities is used when saved.

onSave = (): void => {

this.contact.entityIds = this.selectedEntities.map((e) => e.value);
this.contact.firstName = this.addRemoveForm.controls['firstName'].value;
this.contact.lastName = this.addRemoveForm.controls['lastName'].value;
this.contact.middleInitial = this.addRemoveForm.controls['middleInitial'].value;
const mi = this.addRemoveForm.controls['middleInitial'].value ? 
this.addRemoveForm.controls['middleInitial'].value + ' ' : '';
this.contact.fullName = `${this.contact.firstName} ${mi} ${this.contact.lastName}`;
this.contactsDirectoryClientService.postContact(this.contact).subscribe(
  (data) => {
    if (data && data.contactId && data.contactId > 0) {
      this.data.contactId = data.contactId;
      this.snackBar.success('Contact Information Saved.', '', 5000);
      this.dialogRef.close({
        refreshTable: true,
        data: data,
      });
    }
  },
  (error) => {
    this.snackBar.error('ERROR! Contact Information NOT Saved', 'Dismiss', 0);
    this.dialogRef.close({
      refreshTable: false,
      data: null,
    });
   }
  );
};

@Input property for required

@Input() required!: string | undefined;

I posted this before and the mods temporarily removed it and never posted it afterwards. Please don’t remove this or let me know what happened with my original post.