如何同步FormArray控件，在单个mat-form-field输入中显示项目作为mat-chips，以显示错误消息？

Question

我有一个'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表示其无效。

Answer 1

花了很多时间在试验和错误上并搜索堆栈溢出。我遇到了这个解决了我的问题的帖子：

Angular 2+ material mat-chip-list formArray validation

问题是，当'FormArray'控件被设置为无效时，Chip-list组件没有反映出这种变化。因此没有显示错误消息。当您的表单控件变为errorState时，您必须手动更改mat-chip-list组件的invalid值：

@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>