При использовании formArray я получаю эту ошибку: "ModalDialogComponent.html: 6 ОШИБКА TypeError: Невозможно прочитать свойство 'controls' of null" - PullRequest
Новая
       25

При использовании formArray я получаю эту ошибку: "ModalDialogComponent.html: 6 ОШИБКА TypeError: Невозможно прочитать свойство 'controls' of null"

0 голосов
/ 12 июня 2019

Я хочу добавить динамические элементы, используя реактивные формы в угловых. Я перехожу по этой ссылке: https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/.

Я делаю точно такую ​​же ссылку. Но я получаю ошибку. Ниже приведен код:

файл ts: 

orderForm: FormGroup;
items: FormArray;

constructor(private formBuilder: FormBuilder ) { }

ngOnInit() {
    this.orderForm = this.formBuilder.group({
      iems: this.formBuilder.array([ this.createItem() ])
    })
  }

createItem(): FormGroup {
    return this.formBuilder.group({
      checked: ''
    })
  }

addDynamicCheckBox() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

файл шаблона: 

<div [formGroup]="orderForm">
        {{ orderForm.controls.items.controls }}
      <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-10" [formGroupName]="i">
          <mat-checkbox formControlName="checked"></mat-checkbox>
        </div>
        <div class="col-2" style="float: right">
          <button mat-raised-button>Remove</button>
        </div>
      </div>
    </div>

Редактировать

Я хочу установить значения элементов управления formArray. Я не могу видеть какую-либо ценность. Просто установите флажок на дисплее. Следующий код, который я сделал:

ts file 

setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
    this.data.data.forEach((element) => {
      this.items.push(this.formBuilder.group({
        checked: true,
        selected: element
      }))
    });
  }

HTML-файл 

<div [formGroup]="orderForm">
      <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-8" [formGroupName]="i">
          <mat-checkbox formControlName="checked">{{item.checked}}</mat-checkbox>
        </div>
      </div>

      check box value: {{ orderForm.get('items').controls.checked }}
    </div>
``

1 Ответ

1 голос
/ 12 июня 2019

Кажется, в вашем коде есть опечатка iems -> items .Пожалуйста, смотрите обновленный ответ

TS File 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  orderForm: FormGroup;
  items: FormArray;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createItem()])
    })
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      checked: true
    })
  }

  addDynamicCheckBox() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }

  setCheckBoxValue() {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.formBuilder.group({
      checked: true,
    }))
  }
}

Шаблон 

<div [formGroup]="orderForm">
    <div class="row" formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i=index">
        <div class="col-8" [formGroupName]="i">
            <input type="checkbox" formControlName="checked" />
        I'm {{item.controls.checked.value === true ? "Checked" : "Unchecked"}}
      </div>
    </div>
    <button (click)="setCheckBoxValue()">Add</button>
  </div>
...