Javascript 在角8中的form array中使用form array

我需要在angular 8中创建一个表单生成器

---

我想创建一个表单生成器。在这个表单生成器中，我想清除一个输入，对于该输入，可能需要设置验证。在此表单中，

input

和

vlaidation

必须是动态的

我草签了这份表格：

  createItem(): FormGroup {
    return this.formBuilder.group({
      type: ['', Validators.compose([Validators.required])],
      label: ['', Validators.compose([Validators.required])],
      inputType: ['', Validators.compose([Validators.required])],
      name: ['', Validators.compose([Validators.required])],
      formName: ['', Validators.compose([Validators.required])],
      validations: this.formBuilder.group({
        name: [''],
        message: [''],
        validator: ['']
      })
    });
  }

initialFormBuilder(): void {
 this.formGroup = this.formBuilder.group({
  formItem: this.formBuilder.array([this.createItem()])
});
}

  alidationItem(): FormGroup {
    return this.formBuilder.group({
      name: [''],
      message: [''],
      validator: ['']
    });
  }

  addItem(): void {
    this.items = this.formGroup.get('formItem') as FormArray;
    this.items.push(this.createItem());
  }

  addValidation(): void {
    this.validationItems = this.formGroup.get('formItem').get('validations') as FormArray;
    this.validationItems.push(this.validationItem());
  }

这是html代码：

<form [formGroup]="formGroup">
        <div formArrayName="formItem" *ngFor="let item of formGroup.get('formItem').controls; let i = index;">
            <div [formGroupName]="i">
                <mat-label id="add">Add New input</mat-label>
                <div class="from-field-container">
                    <div class="col-25">
                        <mat-form-field appearance="outline" class="form-element">
                            <mat-label>From Name</mat-label>
                            <input matInput placeholder="Form Name" formControlName="formName">
                        </mat-form-field>
                    </div>
                    <div class="col-25">
                        <mat-form-field appearance="outline">
                            <mat-label>Type Field</mat-label>
                            <mat-select formControlName="type">
                                <mat-option *ngFor="let item of formType" [value]="item.type">
                                    {{item.type}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                    <div class="col-25">
                        <mat-form-field appearance="outline" class="form-element">
                            <mat-label>Field Label</mat-label>
                            <input matInput placeholder="Field Label" formControlName="label">
                        </mat-form-field>
                    </div>
                    <div class="col-25">
                        <mat-form-field appearance="outline">
                            <mat-label>Input Type</mat-label>
                            <mat-select formControlName="inputType">
                                <mat-option *ngFor="let item of inputType" [value]="item.type">
                                    {{item.type}}
                                </mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                    <div class="col-25">
                        <mat-form-field appearance="outline" class="form-element">
                            <mat-label>Field Name</mat-label>
                            <input matInput placeholder="Field Name" formControlName="name">
                        </mat-form-field>
                    </div>
                </div>
                <div formArrayName="validations" *ngFor="let validation of formGroup.get('formItem').get('validations').controls; let j = index">
                    <div [formGroupName]="j">
                        <div class="col-25">
                            <mat-form-field appearance="outline" class="form-element">
                                <mat-label>Validation Name</mat-label>
                                <input matInput placeholder="Validation Name" formControlName="name">
                            </mat-form-field>
                        </div>
                        <div class="col-25">
                            <mat-form-field appearance="outline" class="form-element">
                                <mat-label>Validation Message</mat-label>
                                <input matInput placeholder="Validation Message" formControlName="message">
                            </mat-form-field>
                        </div>
                        <div class="col-25">
                            <mat-form-field appearance="outline" class="form-element">
                                <mat-label>Validator</mat-label>
                                <input matInput placeholder="Validator" formControlName="validator">
                            </mat-form-field>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </form>

添加新输入
从名字
类型字段
{{item.type}
字段标签
输入类型
{{item.type}
字段名
验证名称
验证消息
验证器

现在当我添加这一行时

它向我显示了以下错误：

我需要的是，当用户单击NewValidation按钮时，它应该为他添加一个新的验证

---

这里有什么问题？如何解决此问题？

如果要将formGroup数组添加到validation属性，则必须使用formArray

试试这个：

组件。ts

createItem(): FormGroup {
    return this.formBuilder.group({
      type: ['', Validators.compose([Validators.required])],
      label: ['', Validators.compose([Validators.required])],
      inputType: ['', Validators.compose([Validators.required])],
      name: ['', Validators.compose([Validators.required])],
      formName: ['', Validators.compose([Validators.required])],
      validations: this.validationItems
    });
  }

component.html

<div formArrayName="validations" *ngFor="let validation of item.get('validations').controls; let j = index">
        <div [formArrayName]="j">
          <div class="col-25">
            <label>Validation Name</label>
            <input placeholder="Validation Name" formControlName="name" />
          </div>
          <div class="col-25">
            <label>Validation Message</label>
            <input placeholder="Validation Message" formControlName="message" />
          </div>
          <div class="col-25">
            <label>Validator</label>
            <input placeholder="Validator" formControlName="validator" />
          </div>
        </div>
 </div>

验证名称
验证消息
验证器

---

我需要为字段创建动态验证表单。在您的示例中，我无法添加dynamicI。我只是修改了您的代码，没有删除任何内容，您的用例是什么？我想创建一个表单生成器。在这个表单生成器中，我想清除一个输入，对于该输入，可能需要设置验证。在这个

输入表单

和

验证

中，它们都必须是动态的。这是一个例子。你必须使用FormArray而不是单个formGroup，为什么你仍然使用validations控件作为单个formGroup？

<div formArrayName="validations" *ngFor="let validation of item.get('validations').controls; let j = index">
        <div [formArrayName]="j">
          <div class="col-25">
            <label>Validation Name</label>
            <input placeholder="Validation Name" formControlName="name" />
          </div>
          <div class="col-25">
            <label>Validation Message</label>
            <input placeholder="Validation Message" formControlName="message" />
          </div>
          <div class="col-25">
            <label>Validator</label>
            <input placeholder="Validator" formControlName="validator" />
          </div>
        </div>
 </div>