Получите следующую ошибку: Ошибка: не удается найти элемент управления с путем: 'budgetIncomes -> 0 ->' - PullRequest
Новая
       14

Получите следующую ошибку: Ошибка: не удается найти элемент управления с путем: 'budgetIncomes -> 0 ->'

0 голосов
/ 14 марта 2020

Я получаю следующую ошибку при попытке использовать formarray с angular 9:

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

Я пробовал все, но ничего не получается. Я не понимаю, почему путь не найден: 

<form *ngIf="incomeForm" [formGroup]="incomeForm">
  <div formArrayName="budgetIncomes">
    <h3>Income</h3>
    <div *ngFor="let item of incomesArray.controls; let i=index"[formGroupName]="i">
      <input type="text" [formControlName]="label">
      <input type="number" [formControlName]="somme">
    </div>
    <button (click)="addIncome()">Add Income</button>
  </div>
</form>

<p class="result"  [ngStyle]="{'color': getSum()>=0? 'green' : 'red'}">{{getSum()}}</p>

и .ts: 

import { Component, OnInit, SimpleChanges  } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FormArray } from '@angular/forms';
import { Budget } from '../budget';


export interface BudgetIncomes {
  label: string;
  somme: number;
}

const ELEMENT_DATA: BudgetIncomes[] = [
  {label: 'Hydrogen',  somme: 10},
];

@Component({
  selector: 'app-income',
  templateUrl: './income.component.html',
  styleUrls: ['./income.component.scss']
})


export class IncomeComponent implements OnInit {

  incomeForm: FormGroup;
  sum;



  getSum() {
    // 1st way
    return this.incomesArray.value.reduce((prev, next) => prev + +next, 0);

  }

  createBudget(): FormGroup {
    return this.fb.group(ELEMENT_DATA.map(x => new FormGroup({
        label : new FormControl(x.label),
        somme : new FormControl(x.somme),
      })
    ));
  }

  get incomesArray(): FormArray {
    return this.incomeForm.get('budgetIncomes') as FormArray;
  }

  addIncome() {
    this.incomesArray.push(this.fb.group(this.createBudget()));
  }


  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.incomeForm = this.fb.group({
      budgetIncomes: this.fb.array(ELEMENT_DATA.map(x => new FormGroup({
          label : new FormControl(x.label),
          somme : new FormControl(x.somme),
        })
      ))
    });
  }

}

Здесь ссылка на стек стлиц: https://stackblitz.com/edit/angular-9vk1nr

1 Ответ

0 голосов
/ 14 марта 2020

Проблема в том, что вы используете [formControlName]="label", то есть привязка свойства , что означает, что он будет искать свойство с именем label внутри класса вашего компонента.

Решение будет использовать stati c переплет : formControlName="label" и formControlName="somme".

...