表单控件在组数组表单Angular中返回Null的问题

Question

有人能帮我吗？我正在尝试创建一个动态表单，为公司可能拥有的每个部门添加2个字段(名称和份额(。问题是我得到了一个错误"；控制为空"；我不知道为什么或如何修复它。

component.ts有问题的表格是profileStep2

import { Form, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { User, Company } from '@app/_models';
import { AccountService, AlertService } from '@app/_services';
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
@Component({
selector: 'app-cfar',
templateUrl: './cfar.component.html',
styleUrls: ['./cfar.component.scss'],
providers: [{
provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
}]
})
export class CfarComponent implements OnInit {
user: User;
company: Company;
profileStep1: FormGroup;
profileStep2: FormGroup;
constructor(
private _formBuilder: FormBuilder,
private accountService: AccountService
){ 
this.user = this.accountService.userValue;
}
initDivisions() {
return this._formBuilder.group({
name: ['', Validators.required],
share: ['', Validators.required]
});
}
addDivision(): void{
this.formArray.push(
this._formBuilder.group({
name: ['', Validators.required],
share: ['', Validators.required]
}));
}
ngOnInit(): void {
this.profileStep1 = this._formBuilder.group({
conaolidationAproach: ['', Validators.required]
});
this.profileStep2 = this._formBuilder.group({
divisions: this._formBuilder.array([])
});
}
log(){
console.log(this.profileStep2.value)
}
get formArray(){
return this.profileStep2.get("divisions") as FormArray;
}
getControls(){
return (this.profileStep2.get('divisions') as FormArray).controls;
}
}```
and html
```<mat-stepper #stepper>
<mat-step [stepControl]="profileStep1" errorMessage="Consolidation Approach is required.">
<form [formGroup]="profileStep1">
<ng-template matStepLabel>Fill out your name</ng-template>
<h2>Consolidation Approach</h2>
<input type="radio" class="btn-check" formControlName="conaolidationAproach" id="equityShare" value="equityShare" autocomplete="off">
<label class="btn btn-primary" for="equityShare">Equity Share</label>
<input type="radio" class="btn-check" formControlName="conaolidationAproach" id="finantialControl" value="finantialControl" autocomplete="off">
<label class="btn btn-secondary" for="finantialControl">Finantial Control</label>
<input type="radio" class="btn-check" formControlName="conaolidationAproach" id="operationalControl" value="operationalControl" autocomplete="off">
<label class="btn btn-secondary" for="conaolidationAproach">Operational Control</label>

<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="profileStep2" errorMessage=" is required.">
<form [formGroup]="profileStep2">
<ng-template matStepLabel>Company Divisions</ng-template>
<p>Add your companies divisions</p>
<div formArrayName="divisions" class="row">
<div *ngFor="let division of getControls(); let i=index">
<div formGroupName="i">
<label for="name">Division Name</label>
<input type="text" formControlName="name">
<label for="share">Share %</label>
<input type="number" formControlName="share">
</div>
</div>
</div>
<button (click)="log()">log</button>
<button (click)="addDivision()">Add Division</button>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
<pre>{{ profileStep2.value | json }}</pre>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div>

<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-stepper>

任何帮助都将不胜感激。谢谢

Answer 1

我设法修复了它。问题是我没有在[]中说唱组名，无论如何，谢谢