angular - 如何以模板驱动形式在 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);
        }
      }
}