Required validation on mat-chip-list

I created a dialog modal form that I want to use required validation on a select dropdown list. This dropdown list is called Entities in the add-contact-dialog.component.html file below. I am using app-chips component in that form.

mat-chip-list is actually inside of another component file called chips.component.html. How do I get the required validation to work for the app-chips component. Basically I'm trying to get the map-chip-list in one file to connect the app-chips component Entities dropdown in another for required validation.

I need help making the Entities dropdown a required field with the code used below. I am not sure how to do this with the way this is setup.

I would guess that it would be a similar setup to the hint/mat-hint but I'm not sure.

add-contact-dialog.html

 


  

    
      First Name
      
       First Name is 
   required 
    
  
  

    
      M.I
      
    
  
  

    
      Last Name
      
       Last Name is 
required 
    
  



  ****
  
 

add-contact-dialog.ts -  onSave method for dialog modal form

onSave = (): void => {
this.addAddressToModel();
this.addPhoneNumbersToModel();
const dob = this.addRemoveForm.controls['dateOfBirth'].value;
this.contact.isActive = true;
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.dateOfBirth = dob ? DateTime.fromISO(dob) : undefined;
this.contact.contactTypeCode = this.contact.contactTypeCode ? this.contact.contactTypeCode : 
'SiteContact';
this.contact.startMonth = this.addRemoveForm.controls['startMonth'].value;
this.contact.startYear = this.addRemoveForm.controls['startYear'].value;
this.contact.emailAddress = this.addRemoveForm.controls['email'].value;
this.contact.titlePosition = this.addRemoveForm.controls['title'].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,
    });
   }
  );
};

onSave method for the dialog modal form

chips.component.html

In this file, I am using the mat-chip-list to contain the item. This is the mat-chip component for the properties used in the file above.

{{ label }}


  {{ item.text }}
  cancel
 
 
 {{ required }}
 

  
       {{ option.text }}
 
 
     {{ hint }}
 

chips.component.ts

@Component({
 selector: 'app-linq-chips',
 templateUrl: './linq-chips.component.html',
 })
 export class LinqChipsComponent implements OnInit, DoCheck {
 @Input() label = '';
 @Input() placeholder = '';
 @Input() options: Options[] = [];
 @Input() selectedOptions: Options[] = [];
 @Input() floatLabel: FloatLabelType = 'auto';
 @Input() hint!: string | undefined;
 @Input() required!: string | undefined;

 @ViewChild('optionInput') optionInput: ElementRef | undefined;

 @Output() onRemoved = new EventEmitter();
 @Output() selectedOptionsChanged = new EventEmitter();

 formControl = new FormControl('');
 filteredOptions: Observable | undefined;

 iterableDiffer: IterableDiffer;

 constructor(private readonly iterableDiffers: IterableDiffers) {
   this.iterableDiffer = this.iterableDiffers.find([]).create();
  }

 ngDoCheck(): void {
   const optionChanges = this.iterableDiffer.diff(this.options);
   if (optionChanges) {
   this.filteredOptions = of(this.options);
  }
}

 ngOnInit(): void {
   this.subscribeFilterOptions();
 }

selected(value: Options): void {
 if (this.optionInput) {
   this.optionInput.nativeElement.value = '';
 }
 if (!this.selectedOptions.find((x) => x.text === value.text)) {
   this.selectedOptions.push(value);
   this.selectedOptionsChanged.emit(this.selectedOptions);
 }
}

  private subscribeFilterOptions() {
   this.filteredOptions = this.formControl.valueChanges.pipe(
   startWith(''),
    map((value: string | Options) =>
    value && typeof value === 'string' ? this.options.filter((o) => 
  o.text.toLowerCase().includes(value.toLowerCase())) : this.options.slice()
   )
  );
 }
}