CODEWITHSUNDEEP
arraysjsonangularformarray
Edward
Edward

Reputation: 55

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

I'm build in Angular 8 and I'm trying to render a list of inputs and prepopulate them with JSON data. I am using Reactive Forms for this project. The types array is being mapped correctly and being stored in the group fine. One of the things I am thinking it has something to do with the FormArrayName and where it is placed compared to the FormGroupName. I am wondering if I need to wrap the FormArray Name in the FormGroup Name.

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>

Upvotes: 1

Views: 2054

Answers (2)

cksrc
cksrc

Reputation: 2347

You are using getter incorrectly. Replace get getAccountArr() { return this.accountForm.get('accounts') as FormArray; } with get accounts() { return this.accountForm.get('accounts') as FormArray; }

and remove public accounts: FormArray;

get acts as an 'alias' and everytime you refer to this.accounts will return the FormArray.

Upvotes: 0

Trash Can
Trash Can

Reputation: 6824

You need to replace this line

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

with

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

You need to give the name of the FormArray to formArrayName directive, and getAccountArr is not an exisiting form array in your form group, it's just a property that returns your form array which is different

Upvotes: 0

Related Questions