html - 如何创建嵌套的动态表单元素

Question

我希望在单击“添加”按钮时添加一次选择选项和输入文本字段。

我已经实现了这一点。没关系。

当我单击添加服务按钮时，需要添加相关行中的输入文本字段。

现在，每次我单击时，它都会为每一行分配一个字段。单击后，每行有 2 个“服务”字段。当我点击两次时，每行有 3 个“服务”字段。

当我单击删除服务按钮时，它会从每一行中删除一行，显示出类似的行为。如何确保相关行发生这些操作？

“添加服务”和“删除服务”按钮无法正常工作。

keyValueFA = new FormArray([this.newKeyValueFG]);
keyServFA = new FormArray([this.newServFG]);

propertyFG = new FormGroup({
  keyValue: this.keyValueFA,
  //serv:this.keyServFA
});


get newKeyValueFG(): FormGroup {
  return new FormGroup({
    prof: new FormControl(null),
    //serv: new FormControl(null),
  });
}

get newServFG(): FormGroup {
  return new FormGroup({
    serv: new FormControl(null),
  });
}

get keyValueArrayFGControls(): FormGroup[] {
  return this.keyValueFA.controls as FormGroup[];
}

get keyValueArrayFGControlss(): FormGroup[] {
  return this.keyServFA.controls as FormGroup[];
}

addNewKeyValueFG(): void {
  this.keyValueFA.push(this.newKeyValueFG);
}

addNewServFG(): void {
  this.keyServFA.push(this.newServFG);
}

removeNewKeyValueFG(index: number): void {
  this.keyValueFA.removeAt(index);
}

removeNewServFG(index: number): void {
  this.keyServFA.removeAt(index);
}

<form [formGroup]="propertyFG">
  <div formArrayName="keyValue" *ngFor="let fg of keyValueArrayFGControls; let i = index">
    <div [formGroup]="fg">

      <div class="col-4">

        <select formControlName="prof" width="100%" class="form-control">

          <option *ngFor="let l of professions;" [value]="l._id">
            {{getProfessionNameByLang(l.name)}}
          </option>
        </select>

      </div>

      <div *ngFor="let sr of keyValueArrayFGControlss; let j = index" class="col-4">
        <div [formGroup]="sr">

          <input type="text" formControlName="serv" [id]="'myDiv-' + i+ j" placeholder="Hizmet" />

          <button (click)="removeNewServFG(j)">Remove Serv</button>

        </div>

      </div>
      <button (click)="removeNewKeyValueFG(i)">Remove</button>
      <button (click)="addNewServFG()">Add Serv</button>

    </div>

  </div>

  <button (click)="addNewKeyValueFG()">Add</button>
</form>

Answer 1

您为每个 FormGroup 共享相同的 FormArray 实例 keyServFA。相反，每个 FormGroup 应该有自己的 keyServFA/services FormArray。

  <ng-container formArrayName="services">
    <div
      *ngFor="let sr of serviceControlsByKeyValueFG(i).controls; let j = index"
      class="col-4"
    >
      <div [formGroupName]="j">
        <input
          type="text"
          formControlName="serv"
          [id]="'myDiv-' + i+ j"
          placeholder="Hizmet"
        />

        <button (click)="removeNewServFG(i, j)">Remove Serv</button>
      </div>
    </div>
  </ng-container>

  <button (click)="removeNewKeyValueFG(i)">Remove</button>
  <button (click)="addNewServFG(i)">Add Serv</button>

添加、检索或删除服务 FormGroup 时，您应该提供 keyValueFG 的索引，以获取正确的 keyValueFG 表单组。

get newKeyValueFG(): FormGroup {
  return new FormGroup({
    prof: new FormControl(null),
    services: new FormArray([this.newServFG]),
  });
}

serviceControlsByKeyValueFG(rootIndex: number): FormArray {
  return (this.keyValueFA.controls[rootIndex] as FormGroup).controls[
    'services'
  ] as FormArray;
}

addNewServFG(rootIndex: number): void {
  this.serviceControlsByKeyValueFG(rootIndex).push(this.newServFG);
}

removeNewServFG(rootIndex: number, index: number): void {
  this.serviceControlsByKeyValueFG(rootIndex).removeAt(index);
}

Demo @ StackBlitz