Question

使用formBuilder创建新的Worker时，我需要将引用（Firestore密钥）传递给Worker提供的服务，因为我希望它们（键）成为复选框上的formControlName指令：

 buildForm = () => {this.workerForm = this.formBuilder.group({
    name: ['', {validators: [Validators.required]}],
    services: this.formBuilder.group({
    })})

在“服务”字段中，我想要成对-firebaseServiceKey：否。我不确定是否可以使用* ngFor动态地执行此操作（向对象添加属性），所以我做了一个函数：

mapControlPaths = () => {
    this.servicesService.getServicesKeys().subscribe(res => res.map(key => 
      this.workerForm.value.services[key] = false
        ))}

似乎工作正常（我看到带有前置标记的结果）：

"services": {
    "0IyxGP51E3rSvUZfJdPP": false,
    "80MBmjEOeSc44jluVWjf": false,
    "ELaMKPQZ0ejHeaOzzBtS": false
  }

但是，当我在HTML模板中添加以下行时：

  <div formGroupName="services">
        <label *ngFor="let service of services" for="services">{{service.name}}
            <input formControlName="{{service.key}}" type="checkbox" name="services" id="{{service.key}}">
        </label>
    </div>

我得到了错误：

错误错误：找不到路径为'services->的控件 0IyxGP51E3rSvUZfJdPP'。

但是，如果我手动键入键（没有功能），并且我的组件以此开头：

buildForm = () => {
this.workerForm = this.formBuilder.group({
  name: ['', { validators: [Validators.required] }],
  services: this.formBuilder.group({
    "0IyxGP51E3rSvUZfJdPP": false,
    "80MBmjEOeSc44jluVWjf": false,
    "ELaMKPQZ0ejHeaOzzBtS": false
  })
})

一切正常。我认为这是一个异步问题，但显然不是。那怎么了？

Answer 1

我认为您应该使用FormArray而不是FormGroup，因为您有一组键-值对。（请注意，变量名来自我的Stackblitz示例，可能与您的代码有些不同，但我希望您能理解这一点。）

    this.form = this.formBuilder.group({
      name: ['', {validators: [Validators.required]}],
      services: this.formBuilder.array([])
    });

之后，您应该将键值数组推入控制数组：

    this.servicesArray.forEach(x => {
      control.push(
        this.formBuilder.group({
          key: x.key,
          value: x.value,
        })
      )
    });

请检查这个我用两个组件制作的Stackblitz示例，分别是“ GoodComponent”和“ BadComponent”：https://stackblitz.com/edit/angular-4rk9tw。控制台中显示的错误来自不良组件。

错误：找不到带有路径的控件-角度formControlName看不到{{form.value | json}}显示

1 个答案: