角度 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