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

问：

我希望在单击“添加”按钮时添加一次 select-option 和 input-text 字段。

我已经做到了。没关系。

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

现在，每次我单击时，它都会为每行分配一个字段。单击后，每行有 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>

html 打字稿 angular-reactive-forms 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>

添加、检索或删除服务时，应提供的索引以获取正确的 .FormGroupkeyValueFGkeyValueFGFormGroup

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);
}

演示 @ StackBlitz

上一个：p-dropdown 不会使用反应式表单手动设置值

下一个：错误 TS2531：对象可能为“null”。在表单数组控件上

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

How to create nested dynamic form elements

评论