Angular 8 Error "ERROR Error: "Cannot find control with name: 'getAccountArr'"" When using Form Array

Question

我在 Angular 8 中构建，我正在尝试呈现输入列表并用 JSON 数据预填充它们。我正在为这个项目使用 Reactive Forms。 types 数组被正确映射并存储在组中。我认为它与 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>

Answer 1

您需要替换此行

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

和

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

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

Answer 2

您使用的 getter 不正确。替换 get getAccountArr() { return this.accountForm.get('accounts') as FormArray; } get accounts() { return this.accountForm.get('accounts') as FormArray; }

并删除 public accounts: FormArray;

get 充当 'alias'，每次您引用 this.accounts 时都会 return FormArray。

Angular 8 Error "ERROR Error: "Cannot find control with name: 'getAccountArr'"" When using Form Array

Angular 8 Error "ERROR Error: "Cannot find control with name: 'getAccountArr'"" When using Form Array

arrays

json

angular

formarray