错误错误：在AngularJs中找不到名称为“1”的控件

Question

我需要你的帮助。我正在学习 AngularJs。 我正在尝试使用 AngularJs 中的嵌套 FormArray 动态添加新行。我写了代码，它运行良好，但其中有一个错误。当我点击添加新行按钮时，需要点击 4-5 次才能完成它的任务。当我检查控制台时，它会显示以下错误：

core.js:6185 ERROR Error: Cannot find control with name: '1'
    at _throwError (forms.js:3479)
    at setUpFormContainer (forms.js:3451)
    at FormGroupDirective.addFormGroup (forms.js:7581)
    at FormGroupName.ngOnInit (forms.js:6388)
    at callHook (core.js:4686)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)

    core.js:6185 ERROR Error: Cannot find control with path: '1 -> Name'
    at _throwError (forms.js:3479)
    at setUpControl (forms.js:3303)
    at FormGroupDirective.addControl (forms.js:7551)
    at FormControlName._setUpControl (forms.js:8367)
    at FormControlName.ngOnChanges (forms.js:8288)
    at FormControlName.wrapOnChangesHook_inPreviousChangesStorage (core.js:26853)
    at callHook (core.js:4690)
    at callHooks (core.js:4650)
    at executeInitAndCheckHooks (core.js:4591)
    at refreshView (core.js:11814)

我的 .html 代码是

<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 form-bg">
                <h2 class="mb-3">Add new row dynamically with Nested FormArray</h2>
                <form novalidate [formGroup]="FormGroup">
                <ng-container *ngIf='FormGroup.controls.itemRows!=null'>
                    <div *ngFor="let itemrow of FormGroup.controls.itemRows['controls']; let i=index;" [formGroupName]="i+1">
                        <div class="row">
                            <div class="col-12 col-md-2 form-group">
                                <input type="text" class="form-control" matInput placeholder="Name" formControlName="Name" >
                            </div>
                            <div class="col-12 col-md-2 form-group">
                                <input type="text" class="form-control" matInput placeholder="Roll No" formControlName="RollNo" >
                            </div>
                            <div class="col-12 col-md-2 form-group">
                                <input type="text" class="form-control" matInput placeholder="Class" formControlName="Class" >
                            </div>
                            <div class="col-12 col-md-2 form-group">
                                <input type="text" class="form-control" matInput placeholder="Mobile No" formControlName="MobileNo" >
                            </div>
                            <div class="col-12 col-md-2 form-group">
                             <button class="btn btn-danger" (click)="deleteRow(i)" >X</button>
                            </div>
                        </div>
                    </div>
                </ng-container>
                <div class="form-group pull-right">
                    <button class="btn btn-success" type="button" (click)="addNewRow()" [disabled]="FormGroup.invalid">
                        Add More
                    </button>
                </div>
            </form>
            </div>

我的 .ts 代码是：

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

@Component({
  selector: 'app-reactiveform',
  templateUrl: './reactiveform.component.html',
  styleUrls: ['./reactiveform.component.css']
})
export class ReactiveformComponent implements OnInit {


  FormGroup: FormGroup;
  TotalRow : number;

}

  constructor( private _fb: FormBuilder) { }

ngOnInit(): void {

this.FormGroup = this._fb.group({
     itemRows: this._fb.array([this.initItemRow()])
   });

  }


  initItemRow(){
    return this._fb.group({
     Name: [''],
     RollNo: [''],
     Class: [''],
     MobileNo: ['']
    });
  }

  addNewRow(){
    const control = <FormArray>this.FormGroup.controls['itemRows'];
    control.push(this.initItemRow());
  }

  deleteRow(index: number){
    const control = <FormArray>this.FormGroup.controls['itemRows'];
    if(control != null){
      this.TotalRow = control.value.length;
    }
    if(this.TotalRow > 1){
      control.removeAt(index);
    } else{
      alert ("One Record Mandatory");
      return false;
    }

  }

Answer 1

您正在使用FormArray，因此您必须使用formArrayName（其名称为itemRows）指令，然后才能嵌套其内部项目

 |- FormGroup
   |- FormArray
     |- FormGroup 1
     |- FormGroup 2

HTML

<form novalidate [formGroup]="FormGroup">
  <ng-container *ngIf='FormGroup.controls.itemRows!=null'>
     <div formArrayName="itemRows">
        <div *ngFor="let itemrow of FormGroup.controls.itemRows['controls']; let i=index;" [formGroupName]="i">
        ...
        ...
     </div>
  </ng-container>
</form>

另请注意，[formGroupName] 名称正在执行 i+1 索引。既然是FormArray，那就改成[formGroupName]="i"