时间戳

首页 > 解决方案 > ERROR 错误：找不到带有路径的控件：'stocks -> stockName'

html - ERROR 错误：找不到带有路径的控件：'stocks -> stockName'

问题描述

嗨，我尝试使用反应式表单模块创建动态表单时出错

这是我的html代码

<div class="container-fluid">
  <h2>Stock Rebalancer</h2>
  <div class="form-group">
    <input class="form-control" placeholder="Total Capital" [(ngModel)]="buyingPower">
  </div>
  <div class="form-group">
    <input class="form-control" placeholder="Buying power" [(ngModel)]="buyingPower">
  </div>
  <form [formGroup]="stockForm">
    <div formArrayName="stocks">
      <div class="form-group" *ngFor="let stock of stockForm.get('stocks')['controls']; let i = index">
        <div class="form-row">
          <div class="col">
            <input formControlName="stockName" class="form-control" placeholder="stock name">
          </div>
          <div class="col">
            <input formControlName="currentTotal" class="form-control" placeholder="$current total">
          </div>
          <div class="col">
            <input formControlName="stockPercentage" class="form-control" placeholder="percantage%">
          </div>
          <div class="col">
            <input formControlName="stockPrice" class="form-control" placeholder="$stock price">
          </div>
          <button class="btn btn-light" type="button" title="remove Stock" (click)="onRemoveStock(i)">X</button>
        </div>
      </div>
    </div>
  </form>
  <button class="btn btn-primary" type="button" title="Add Stock" (click)="addStock()">Add Stock</button>
  <!-- <button class="btn btn-primary" type="button" title="Add Stock" (click)="onRebalance()">Rebalance</button> -->
</div>

它有四个控件，stockName、stockPrice、currentTotal 和 stockPercentage。使用其中四个控件可以在表单数组中构建项目。

下面是组件的代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Plan } from 'src/app/interface/plan';

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

export class StockComponentCalculatorComponent implements OnInit {

  constructor(private formBuilder: FormBuilder) { }

  stockForm: FormGroup;
  buyingPower: number;
  plans: Plan[]

  ngOnInit(): void {
    this.stockForm = this.formBuilder.group({
      stocks: this.formBuilder.array([])
    });
    const stockControl = this.stockForm.get('stocks')['controls'];

    for (var i = 0; i < 6; i++) {
      stockControl.push(this.formBuilder.group({
        stockName: new FormControl(''),
        currentTotal: new FormControl(0),
        stockPercentage: new FormControl(0),
        stockPrice: new FormControl(0),
      }));
    }
  }

  createStock(): FormGroup {
    return this.formBuilder.group({
      stockName: new FormControl(''),
      currentTotal: new FormControl(0),
      stockPercentage: new FormControl(0),
      stockPrice: new FormControl(0),
    });
  }

  addStock() {
    const stockControl = this.stockForm.get('stocks')['controls'];
    stockControl.push(this.createStock());
  }

  onRemoveStock(index) {
    const stockControl = this.stockForm.get('stocks')['controls'];
    stockControl.removeAt(index);
  }
}

我得到如下错误：

ERROR Error: Cannot find control with path: 'stocks -> stockName'
ERROR Error: Cannot find control with path: 'stocks -> currentTotal'

我想知道我在这里犯了什么错误。谢谢您的帮助！

标签： htmlangulartypescriptangular-reactive-forms

解决方案

我解决了更改问题的问题

*ngFor="let stock of stockForm.get('stocks')['controls']; let i = index"

至

*ngFor="let stock of stocks; let i = index"

还添加了一个新的 div

<div [formGroup]="stock">

对于 ts 部分，我声明 

stocks: FormGroup[]
this.stocks = <FormGroup[]>(this.stockForm.controls.stocks as FormArray).controls;

由于是嵌套结构FormGroup -> FormArray -> FormGroup，所以我花了点时间才弄明白。

推荐阅读