Angular 8错误“错误错误：“找不到名称为'getAccountArr'的控件”“使用表单数组时答案

【问题标题】：Angular 8 Error "ERROR Error: "Cannot find control with name: 'getAccountArr'"" When using Form ArrayAngular 8错误“错误错误：“找不到名称为'getAccountArr'的控件”“使用表单数组时
【发布时间】：2020-01-28 05:10:51
【问题描述】：

我在 Angular 8 中构建，我正在尝试呈现输入列表并使用 JSON 数据预填充它们。我正在为这个项目使用 Reactive Forms。类型数组被正确映射并存储在组中。我认为其中一件事与 FormArrayName 以及与 FormGroupName 相比它的放置位置有关。我想知道是否需要将 FormArray 名称包装在 FormGroup 名称中。

view.ts

export class View2Component implements OnInit {
  // public accountArr: FormArray;
  public accounts: FormArray;
  public accountForm: FormGroup;
  types: any = [
    {
      name: "Assets",
      display: {
        default:'Display Value',
        inputType:'input'
      },
      type: {
        default:'type Value',
        inputType:'selected',
        data: ['a', 'b', 'c']
      },
      totalDesc: {
        default:'totalDesc Value',
        inputType:'input'
      },
      underlineBefore: {
        default:'underlineBefore Value',
        inputType:'input'
      },
      underlineAfter: {
        default:'underlineAfter Value',
        inputType:'input'
      },
      reverse: {
        default: false,
        inputType:'checkbox'
      },
      print: {
        default: true,
        inputType:'checkbox'
      },
    },
    {
      name: "Assets",
      display: {
        default:'Display Value',
        inputType:'input'
      },
      type: {
        default:'type Value',
        inputType:'selected',
        data: ['a', 'b', 'c']
      },
      totalDesc: {
        default:'totalDesc Value',
        inputType:'input'
      },
      underlineBefore: {
        default:'underlineBefore Value',
        inputType:'input'
      },
      underlineAfter: {
        default:'underlineAfter Value',
        inputType:'input'
      },
      reverse: {
        default: false,
        inputType:'checkbox'
      },
      print: {
        default: true,
        inputType:'checkbox'
      },
    }
  ];

  get getAccountArr() { return this.accountForm.get('accounts') as FormArray; }

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.accountForm = this.fb.group({
      accounts: this.fb.array([])
    });


    this.renderAccountForm();
    console.log('accountArr', this.accountForm);
  }


  renderAccountForm() {
    this.types.map(item => {
      let val = this.fb.group({
        display: [item.display.default],
        type: [item.type.default]
      });
      this.getAccountArr.push(val);
    });
  }
}

view.html

<form [formGroup]="accountForm" novalidate>
  <div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">
    <div *ngFor="let account of getAccountArr.controls; let i = index;">
        <div [formGroupName]="i">
            <h1 class="index-class">{{ i }}</h1>
            <h1>{{ account.value.display }}</h1>
            <input
                type="text"
                formControlName="{{ i }}"
                [value]="account.value.display"
                [placeholder]="account.value.displays"
            />
        </div>
    </div>
  </div>
</form>

【问题讨论】：

标签： arrays json angular formarray

【解决方案1】：

您错误地使用了 getter。替换get getAccountArr() { return this.accountForm.get('accounts') as FormArray; } get accounts() { return this.accountForm.get('accounts') as FormArray; }

并删除public accounts: FormArray;

get 充当“别名”，每次引用 this.accounts 时都会返回 FormArray。

【讨论】：

【解决方案2】：

你需要替换这一行

<div formArrayName="getAccountArr" style="height:100px; margin:40px auto;">

与

<div formArrayName="accounts" style="height:100px; margin:40px auto;">

您需要将FormArray 的名称提供给formArrayName 指令，并且getAccountArr 不是您的表单组中现有的表单数组，它只是一个返回您的不同表单数组的属性

【讨论】：