简体   繁体   English

ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用

[英]ERROR Error: formArrayName must be used with a parent formGroup directive

I'm using reactive-form-array for one of my projects.我正在为我的一个项目使用反应形式数组。 I'm trying to make a dynamic form which add/delete fields on button click.我正在尝试制作一个动态表单,在按钮单击时添加/删除字段。 I'm getting the following error in my code我的代码中出现以下错误

ERROR Error: formArrayName must be used with a parent formGroup directive. ERROR 错误:formArrayName 必须与父 formGroup 指令一起使用。 You'll want to add a formGroup directive and pass it an existing FormGroup instance您需要添加一个 formGroup 指令并将现有的 FormGroup 实例传递给它

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


 public communicationForm: FormGroup;
  public items: FormArray;

  createItem(): FormGroup {
    return this.fb.group({
      communicationType: [''],
      communicationValue: ['']
    });
  }

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

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.communicationForm = this.fb.group({
      items: this.fb.array([this.createItem()])
    }),
    this.items = this.communicationForm.get('items') as FormArray;
  }


<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of communicationForm.get('items').controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        {{communication.name}}
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div [formGroupName]="i">
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

Add a parent formGroup:添加父表单组:

<div class="col-md-6" [formGroup]="communicationForm">

Only other thing I would change is add a getter for the items:我唯一要更改的另一件事是为这些项目添加一个吸气剂:

TS TS

get items(): FormArray {
  return this.communicationForm.get('items') as FormArray;
}

And ngOnInit is: ngOnInit 是:

ngOnInit() {
  this.communicationForm = this.fb.group({
    items: this.fb.array([this.createItem()])
  })
}

HTML HTML

<div class="col-md-6">
        <h3>Communications</h3>
        <div formArrayName="items" *ngFor="let item of items.controls; let i = index;">
            <div [formGroupName]="i">
                <select class="form-group col-md-5" (change)="changeCommunication($event)" formControlName="communicationType">
                    <option value="" disabled>Communications</option>
                    <option *ngFor="let communication of Communications" [ngValue]="communication.id">
                        {{communication.name}}
                    </option>
                </select>
            </div>
            <div [formGroupName]="i">
                <input type="text" class="col-md-6" formControlName="communicationValue">
            </div>
            <div>
                <i class="fa fa-plus-circle" (click)="addItem()"></i>
            </div>
        </div>
    </div>

when we has a FormArray NOT closed in a formGroup we use当我们在我们使用的 formGroup 中没有关闭 FormArray 时

<form [formGroup]="items">
   <!--see that iterate over items.controls-->
   <!-- and create a formGroup= the variable -->
   <div *ngFor="let group of items.controls" [formGroup]="group">
      <input formControlName="communicationType">
      <input formControlName="communicationValue">
   </div>
</form>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 formArrayName必须与父formGroup指令一起使用 - formArrayName must be used with a parent formGroup directive 错误错误:formControlName必须与父formGroup指令一起使用 - ERROR Error: formControlName must be used with a parent formGroup directive Angular 4 - 错误:formControlName 必须与父 formGroup 指令一起使用 - Angular 4 - Error: formControlName must be used with a parent formGroup directive 错误 formControlName 必须与父 formGroup 指令一起使用。 您需要添加一个 formGroup - Error formControlName must be used with a parent formGroup directive. You'll want to add a formGroup 错误:formControlName 必须与父 formGroup 指令一起使用。 您需要添加一个 formGroup 指令 - Angular 反应式表单 - Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms 错误:“formControlName 必须与父 formGroup 指令一起使用。” 为了<input ngbDatepicker #e="ngbDatepicker" (click)="e.toggle()"> - Error: "formControlName must be used with a parent formGroup directive." for <input ngbDatepicker #e="ngbDatepicker" (click)="e.toggle()"> formControlName 必须与父 formGroup 指令一起使用 - formControlName must be used with a parent formGroup directive formGroupName 必须与父 formGroup 指令一起使用 - formGroupName must be used with a parent formGroup directive 错误:ngModel 不能用于使用父 formGroup 指令注册表单控件 - Error : ngModel cannot be used to register form controls with a parent formGroup directive 如何将 formArrayName 与父 formGroup 指令一起使用。 角 - How to use formArrayName with a parent formGroup directive. Angular
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM