时间戳

首页 > 解决方案 > 如何将带有表单控件的表单组动态添加到表单组

javascript - 如何将带有表单控件的表单组动态添加到表单组

问题描述

我有一个非常大的表单，其中包含许多复选框、收音机、文本区域......整个表单是从数据库动态生成的。

在某些时候，我需要验证一组复选框，其中必须检查该复选框组的至少一个复选框。所以我遵循了这本手册：https ://stackoverflow.com/a/54036689/11937089

我的问题是，表单组内的表单组必须是动态生成的。

我试过这样的事情：

this.outerForm.addControl('checkboxGroup' + (foo.id + ' ')), new FormGroup({}));

foo.forEach(bar => { get('checkboxGroup' + (foo.id + ' ')).addControl('checkbox'+ (foo.id + ' ') + (bar.id + ' ')), new FormControl(' ')); }

但我很确定这是完全错误的，因为 addControl 不适用于表单组，而且我不知道如何在 addControl-Part 中引用动态 FormGroup checkboxGroup1，这get似乎是错误的。

outerform
--> textarea
--> checkboxGroup1
----->checkbox11
----->checkbox12
----->checkbox13
----->checkbox14
--> textarea
--> textarea
--> checkboxGroup2
----->checkbox21
----->checkbox22
----->checkbox23
----->checkbox24

标签： javascriptangular

解决方案

使用formArray https://stackblitz.com/edit/angular-form-array-example尝试这样的事情

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
          </ng-container>
        </div>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }
}

推荐阅读