Ошибка Angular 8 «Ошибка ERROR:« Не удается найти элемент управления с именем: «getAccountArr» »« При использовании массива форм - PullRequest
Новая
       18

Ошибка Angular 8 «Ошибка ERROR:« Не удается найти элемент управления с именем: «getAccountArr» »« При использовании массива форм

0 голосов
/ 28 сентября 2019

Я строю в Angular 8 и пытаюсь отобразить список входных данных и предварительно заполнить их данными JSON.Я использую реактивные формы для этого проекта.Массив типов отображается правильно и нормально сохраняется в группе.Я думаю, что одна из вещей связана с 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>

1 Ответ

0 голосов
/ 28 сентября 2019

Вам необходимо заменить эту строку

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

на

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

Вам необходимо дать имя * 1011директива * to formArrayName, а getAccountArr - это не существующий массив форм в вашей группе форм, это просто свойство, которое возвращает ваш массив форм, который отличается

...