Angular 10 复选框值变得未定义

Question

我在组件中配置了以下 formGroup:

  constructor(private apiService: ApiService) {
    this.form = new FormGroup({
      product: new FormControl(),
      shops: new FormGroup({})
    });
  }

当我从选择栏中选择供应商时，我想将其所有商店作为复选框加载。 在加载复选框的函数中，我填写了表单组:

  loadShops(product: string): void {
    this.apiService.getShopsThatSellProduct(product).subscribe({
      next: data => {
        this.shops = data;
        const checkboxes: FormGroup =  this.form.get('shops') as FormGroup;
        checkboxes.reset();
        this.shops.forEach((shop, index) => {
          checkboxes.addControl('shop_' + index, new FormControl(shop));
        });
      }
      ,
      error: err => {
        console.log(err.message);
      }
    });
  }

在我的 html 中，我使用了以下代码:

  <div class="shops">
    <mat-form-field>
      <mat-select placeholder="Shops"  >
        <mat-option formGroupName="shops" *ngFor="let someFormControl of form.get('shops').value | keyvalue">
          <mat-checkbox  [formControlName]="someFormControl.key"> {{someFormControl.value.name}}</mat-checkbox>
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

每个商店都有以下字段:

{
name: string
owner: string
address : string
}

选择产品后，商店列表会更新。但是，默认情况下会选择所有商店，当我尝试选择/取消选择任何商店选项时，该值将变为未定义。

为什么每个选项第一次“取消选择”后{{someFormControl.value.name}}变得未定义？

stackbiz example

Answer 1

您误解了表单控件值是什么。您使用此代码创建了一个表单控件:

checkboxes.addControl('shop_' + index, new FormControl(shop));

这将创建一个初始值为 shop 的 FormControl，它是一个如下所示的对象:

{
  name: 'Dan',
  age: 30
}

所以首先，你的商店被选中是因为这个对象是真实的。取消选择它后，它将更改为:false，因此someFormControl.value.name将变得未定义(因为false.name未定义)，这样你的标签就会消失。

要修复此问题，您可以将 new FormControl(shop) 更改为 new FormControl(false) 以使其在启动时处于未选中状态，并更改 someFormControl.value。 name 到 someFormControl.index 以将人名显示为标签。 (或 data['USA'][i].age 将年龄显示为标签。)

See It On stackblitz