如何同步在单个 mat-form-field 输入内将项目显示为 mat-chips 的 FormArray 控件以显示错误消息？答案

【问题标题】：How to sync FormArray control that displays items as mat-chips inside of a single mat-form-field input, to display error messages?如何同步在单个 mat-form-field 输入内将项目显示为 mat-chips 的 FormArray 控件以显示错误消息？
【发布时间】：2019-09-12 05:03:34
【问题描述】：

我有一个'mat-form-field' 输入，我在其上显示代表不同服装尺寸的mat-chip 元素列表。筹码可以是'L'、'S'等... 目前，这就是我遍历所有尺寸列表并显示它们的方式：

`
<mat-chip-list formArrayName="sizes" #chipList [multiple]="true" [selectable]="true">

          <mat-chip #chipRef
            *ngFor="let gearSize of gearItemForm.controls['sizes'].value; let i=index"            
            [selected]="gearSize.size.available"  
            (click)="gearSize.size.available = !gearSize.size.available; onSelectedChipSize()"  
            [color]="gearSize.size.color">{{ sizeEnum[gearSize.size.size] }}  
          </mat-chip>

        </mat-chip-list>

          <input
          matInput
          [formGroupName]="0"
          placeholder="Gear sizes..."
          [matChipInputFor]="chipList"
          style="display: none;"
          class="gear-size-label"
         >
          <span>Is form array sizes invalid: {{gearItemForm.get('sizes').touched}}</span>

        <mat-error *ngIf="gearItemForm.get('sizes').invalid && gearItemForm.get('sizes').touched">Please select a size</mat-error>

      </mat-form-field>
`

这就是我设置表单的方式：

`
this.gearItemForm = this.fb.group({
      name: this.fb.control(name, Validators.required),
      price: this.fb.control(price, Validators.required),
      sizes: this.fb.array(sizesForm, this.requireSize()),
      inStock: this.fb.control(inStock)
})
`

sizesForm 在哪里：

`
for (let index = 0; index < this.gearSizes.length; index++) {
          sizesForm.push(this.fb.group({
           'size': this.fb.control(sizes[index])
        }))        
      }
`

我的问题是我有一个自定义验证器，它要求用户在将新商品发布到商店之前选择商品的尺寸。一切都按预期工作，但如果用户没有选择任何尺寸，我会尝试显示错误消息。目前一切正常，因为如果表单无效，我会禁用表单“提交”按钮。如果我没有选择任何筹码，则表格的“提交”按钮将被禁用。但是，我无法使用 'mat-error' 让表单显示任何错误，即使 <mat-error *ngIf="gearItemForm.get('sizes').invalid">Please select a size</mat-error> 返回 true 表示其无效。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

在花费大量时间反复试验和搜索堆栈溢出之后。我遇到了这个解决了我的问题的 SO 帖子：

Angular 2+ material mat-chip-list formArray validation

问题在于，当“FormArray”控件设置为无效时，Chip-list 组件未反映此更改。因此没有显示错误消息。当您的表单控件变为 invalid 时，您必须手动更改 mat-chip-list 组件的 errorState 值，如下所示：

@ViewChild('chipList') chipList: MatChipList;

ngOnInit() {
    this.gearItemForm.get('sizes').statusChanges.subscribe(status => 
          this.chipList.errorState = status === 'INVALID' ? true : false)
}

然后在你的 HTML 模板中：

<mat-form-field id="sizes">        
        <mat-placeholder class="placeholder">Gear sizes...</mat-placeholder>

        <mat-chip-list formArrayName="sizes" #chipList [multiple]="true" [selectable]="true">

          <mat-chip #chipRef  
            *ngFor="let gearSize of gearItemForm.controls['sizes'].value; let i=index"                    
            [selected]="gearSize.available"  
            (click)="gearSize.available = !gearSize.available; onSelectedChipSize()"  
            [color]="gearSize.color">{{ sizeEnum[gearSize.size] }}  
          </mat-chip>

        </mat-chip-list>

        <mat-error *ngIf="sizes.invalid && sizes.touched">Please select a size</mat-error>
      </mat-form-field>

【讨论】：