Question

首先，我没有看到模态如何与这个问题有关，因为它实际上是在这个组件的代码中，而不是孩子。不过，这是一种模式，以防万一。

我选择不使用FormArray，因为我需要跟踪可能添加到单独对象中的选择，因此我只是为控件创建唯一ID并将它们添加到FormGroup。我可以访问ts代码中的控件，设置值，获取值等，但表单没有绑定，我不明白为什么不。

我可以在这种模式形式中拥有未知数量的项目，每个项目都有一个选择器（下拉选择一个属性），然后输入能够修改一些数据。输入可以是不同类型的，因此需要根据选择器的选择添加和绑定。

<form [formGroup]="multiEditFormGroup" novalidate>
  <div *ngFor="let item of multiEditSelections; let i = index">
    <div>
      <mdb-select [options]="availablePropsSelect"
        placeholder="Choose property to edit"
        class="colorful-select dropdown-main"
        (selected)="multiEditSelectProp(item.selectorId, $event)"></mdb-select>
      <label>Property to edit</label>
    </div>

    <div>
      <div>
        <input mdbActive
           type="text"
           class="form-control"
           [formControlName]="item.controlId" />
       </div>
     </div>
   </div>
 </form>

ts代码的例外：

public multiEditFormGroup = new FormGroup({});

onModalOpen():void {

  const selectorId = this.utils.uuid();
  this.multiEditFormGroup.addControl(selectorId, this.propSelector);
  this.multiEditSelections.push({
    selectorId: selectorId,
    prop: '',
    label: '',
    type: '',
    controlId: '' // not yet known since type hasn't been chosen
  });
}

onSelect(selectorId: string, selectEvent: any): void {

  let selection = this.multiEditSelections.find(selection => {
    return selection.selectorId === selectorId;
  });

  const controlId = this.utils.uuid();
  const prop = selectEvent.value;
  this.multiEditFormGroup.get(selection.selectorId).setValue(prop);
  this.multiEditFormGroup.markAsDirty();
  this.multiEditFormGroup.markAsTouched();
  const model = this.multiEditModel.find(model => {
    return model.prop === prop;
  });
  this.multiEditFormGroup.addControl(controlId, this.testCtrl);
  selection.controlId = controlId;
  selection.prop = prop;
  selection.label = model.label;
  selection.type = model.type;
}

记录到控制台显示项目正在添加到FormGroup，但绑定不会发生在DOM上。例如，我可以在输入中添加(keyup)事件处理程序，并在已创建的表单控件中设置值，并更新FormGroup。但是，在前端添加的任何输入都不会更新FG，因为它显然没有绑定。这是时间问题还是因为controlId稍后会更新？我在更新正在迭代的数组之前创建了FormControl。

哦，我在控制台上没有错误。

Answer 1

我认为你需要做出这样的改变：

[formControlName]="item.controlId"

需要：

formControlName="{{item.controlId}}"

无法绑定到Angular组件

1 个答案: