Angular 6 Forms не может найти ошибку управления

Я пытаюсь создать массивы форм в Angular. Когда данные не отображались, я свернул код, чтобы показать поведение. Я должен использовать массивы форм для окончательного кода. Помогите мне, пожалуйста, пройти через это. Я использую Angular 6.

Почему я получаю эту ошибку:

Ошибка: не удается найти элемент управления с именем: 'resultOptions'

// My component .ts file

import {FormControl, FormArray, FormBuilder, FormGroup} from '@angular/forms';
export class MyComponent implements OnInit, OnDestroy  {

  private resultForm: FormGroup;
  private destroyed$: Subject<boolean> = new Subject();

  resultData = [
    {
      text: 'My Text',
    }];

  constructor(private formBuilder: FormBuilder) {

    this.resultForm = this.formBuilder.group({
      childData: this.formBuilder.array([])
    });

    this.setMainOptions();
  }

  setMainOptions() {
    const control = <FormArray>this.resultForm.controls.childData;
    this.resultData.forEach(x => {
      control.push(this.formBuilder.group({
        text: new FormControl()}))
    })
  }
  ngOnInit() {
  }

  ngOnDestroy() {
    this.destroyed$.complete();
  }
}

// my html

    <form [formGroup]="resultForm">
<div formArrayName="resultOptions">
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
    <div [formGroupName]="i">
      <input [formControlName]="text" />
    </div>
  </div>
</div>
</form>

<pre>{{resultForm.value | json}}</pre>

Высоко оценен!


person user1019042    schedule 14.11.2018    source источник
comment
вы можете разместить минимальный стек? Это очень поможет   -  person Akber Iqbal    schedule 14.11.2018
comment
Попробуйте использовать childData вместо resultOptions внутри HTML.   -  person Vishw Patel    schedule 14.11.2018
comment
измените formArrayName = resultOptions на formArrayName = childData. FormArrayName должен соответствовать тому, что вы передаете ему в formGroup.   -  person pixelbits    schedule 14.11.2018
comment
поделитесь своим html представлением, чтобы узнать, на что на самом деле ссылаются там   -  person Farooq Ahmed Khan    schedule 14.11.2018


Ответы (1)


я попытался воспроизвести вашу ошибку с помощью stackblitz и обнаружил, что вам нужно изменить код, чтобы добиться желаемого, насколько я понимаю. пожалуйста, проверьте ссылку, код теперь не вызывает ошибок в консоли.

Измененный код выглядит следующим образом:

  /// Component 

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import {FormControl, FormArray, FormBuilder, FormGroup} from '@angular/forms';

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  implements OnInit, OnDestroy  {

    private resultForm: FormGroup;
    // private destroyed$: Subject<boolean> = new Subject();

    resultData = [
      {
        text: 'My Text 1',
      },
      {
        text: 'My Text 2',
      },
      {
        text: 'My Text 3',
      },
      {
        text: 'My Text 4',
      }];

    constructor(private formBuilder: FormBuilder) {

      this.resultForm = this.formBuilder.group({
        childData: this.formBuilder.array([])
      });

      this.setMainOptions();
    }

    setMainOptions() {
      const control = <FormArray>this.resultForm.controls.childData;
      this.resultData.forEach(x => {
        control.push( new FormControl(x.text))
      })
    }

    ngOnInit() {
    }

    ngOnDestroy() {
      // this.destroyed$.complete();
    }
  }

\\\ HTML
<form [formGroup]="resultForm">
<div formArrayName="childData">
  <ng-container> 
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
      <input formControlName='{{i}}' />
  </div>
  </ng-container>
</div>
</form>

{{resultForm.get('childData').controls.length}}

<pre>{{resultForm.value | json}}</pre>
person Kedar9444    schedule 14.11.2018