Angular 6 Forms Не удается найти ошибку управления - PullRequest
Новая
       27

Angular 6 Forms Не удается найти ошибку управления

0 голосов
/ 14 ноября 2018

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

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

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

<code>// 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}}

С благодарностью!

1 Ответ

0 голосов
/ 14 ноября 2018

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

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

<code>  /// 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}}
...