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

Posted 2023-05-09

【中文标题】错误错误：在AngularJs中找不到名称为“1”的控件

【英文标题】：ERROR Error: Cannot find control with name: '1' in AngularJs

【发布时间】：2020-08-20 04:08:42

【问题描述】：

我需要你的帮助。我正在学习 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';
importFormGroup, 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;
    

  

【参考方案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"

【讨论】：

您不应该在索引中添加 +1。顺便说一句，当我们在 Angular 中管理 FormArray 时，有一个 getter：'get itemRowsArray() return this.FormGroup.get('itemsRows') as FormArray" 并使用 *ngFor="let grop of itemsRowArray.controls";let i=index; [formGroupName]="i"

@Eliseo 我的错。我错过了那个错误。感谢您的提醒。你有鹰眼:)