How to trigger mat chip error validation? - html

Question

I'm doing a error validation for a field with mat-chip, I'm able to pop up the error validation message only after user add a single mat-chip value, then remove the value. I want to make it where when user click on the field then go to a next field of the form without adding any value, it'll already trigger the error message. Below is my code snippet
HTML :
<form [formGroup]="positionForm">
<div fxLayout="column" fxLayoutAlign="space-between stretch">
<mat-form-field appearance="outline">
<mat-label>Title</mat-label>
<input matInput formControlName="title" type="text" placeholder="Title" required>
<mat-error *ngIf="positionForm.controls.title.invalid">This field is required.</mat-error>
</mat-form-field>
<mat-form-field class="chip-list" appearance="outline" (click)="formValue()">
<mat-label>Skills *</mat-label>
<mat-chip-list #chipSkills>
<mat-chip *ngFor="let skill of positionForm.get('skills').controls; let i = index" [selectable]="selectable"
[removable]="removable" (removed)="removeSkills(i)" (click)="formValue()">
{{skill.value}}
<mat-icon class="remove-chip" matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Enter Skills..."
[matChipInputFor]="chipSkills"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="addEditSkill($event)" required>
</mat-chip-list>
<mat-error *ngIf="positionForm.controls.skills.errors">Atleast 1 skill need to be added </mat-error>
</mat-form-field>
</form>
TS :
title = new FormControl('', [Validators.required,this.customValidator.NoWhiteSpaceValidator]);
skills = new FormArray([], [Validators.required, this.validateArrayNotEmpty] );
validateArrayNotEmpty(chip: FormControl) {
if (chip.value && chip.value.length === 0) {
return {
validateArrayNotEmpty: { valid: false }
};
}
return null;
}