Как применить требуемую проверку на mat-chip в форме на основе шаблона?

Question

У меня есть форма, которая включает в себя mat-chip и кнопку в форме (на основе шаблона), и я хочу отключить кнопку отправки, если mat-chip не проверен,

demo.component.html

<form #demoForm="ngForm">
    <mat-form-field >
        <mat-chip-list #chipList>
            <mat-chip *ngFor="let item of list" [selectable]="true"
                          (remove)="remove(item)" required" #chips="ngModel" name="chips">
                  {{item}}
                  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>
                <input placeholder="enter item"
                       [matChipInputFor]="chipList"
                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                       [matChipInputAddOnBlur]="true"
                       (matChipInputTokenEnd)="add($event)"/>
        </mat-chip-list>
    </mat-form-field>    
    <button mat-button type="submit" [disabled]="demoForm.invalid">Submit</button>
</form>

В demo.component.ts я определил функции для добавления и удаления фишек в моем входе

class Demo{

  public separatorKeysCodes = [ENTER, COMMA];
  public list = [];
    add(event): void {
        if (event.value) {
          this.list.push(event.value);
        }
        if (event.input) {
          event.input.value = '';
        }
      }


    remove(data: any): void {
        if (this.list.indexOf(data) >= 0) {
          this.list.splice(this.list.indexOf(data), 1);
        }
      }
}