我通过更改]解决了我的问题,>
*ngFor="let stock of stockForm.get('stocks')['controls']; let i = index"
嗨,我尝试使用反应性表单模块创建动态表单时遇到错误
这是我的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'
我想知道我在这里犯了什么错误。谢谢您的帮助!
嗨,我尝试使用反应性表单模块创建动态表单时遇到错误,这是我的html代码
我通过更改]解决了我的问题,>
*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,所以我花了一些时间弄清楚。
我通过更改]解决了我的问题,>
*ngFor="let stock of stockForm.get('stocks')['controls']; let i = index"