Angular 2 +

Question

我创建了一个角度为6的基本表单。有一些输入，并且我使用“ required”来显示错误消息并禁用了提交按钮。

这里是：

<form (ngSubmit)="submit()" #myForm="ngForm">
  <div id="iterationField" class="col-sm-5">
    <h6>Iterations to calculate performance</h6>
    <mat-form-field>
      <input matInput type="number" id="iter" required [(ngModel)]="iteration" name="iter" #iter="ngModel" min="1">
    </mat-form-field>
    <div *ngIf="iter.invalid && (iter.dirty || iter.touched)" class="alert alert-danger">
      Iteration is required
    </div>
  </div>

  <button type="submit" color="primary" [disabled]="!myForm.form.valid">Submit</button>
</form>

这正常工作。 现在，我正在尝试添加有角度的材料芯片列表。在documentation和example之后，我有了这个：

        <div id="costField">
          <mat-form-field class="full-width">
            <mat-chip-list #chipCostList>
              <mat-chip *ngFor="let item of svr.cost" [selectable]="selectable" [removable]="removable" (removed)="remove(item, 'cost')">
                {{item}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
              </mat-chip>
              <input placeholder="Cost" [matChipInputFor]="chipCostList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event, 'cost')" [(ngModel)]="costValue" #cost="ngModel" name="cost" required>
            </mat-chip-list>
          </mat-form-field>
          <div *ngIf="cost.invalid && (cost.dirty || cost.touched)" class="alert alert-danger">
            Cost is required
          </div>
        </div>

但是，这不起作用。我没有错误信息。 我尝试在mat-chip-list元素中添加required，但是这都不起作用。 我在Stackblitz上复制了一个类似的示例。

芯片和输入未链接。我的意思是输入无法识别芯片。因此，如果您仅单击水果输入，然后单击其旁边。错误消息将会出现，而里面已经有一些芯片。

我如何使其工作？