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'返回true表示其无效，我也无法使用<mat-error *ngIf="gearItemForm.get('sizes').invalid">Please select a size</mat-error>来显示任何错误。

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>

如何同步在单个mat-form-field输入中将Forms控件显示为mat-chip的FormArray控件，以显示错误消息？

1 个答案: