角度错误 TS2322：类型 'number' 不可分配给类型 'FormGroup'

Question

我从JSON绑定步进器。我如何动态地分配formgroup和stepControl值。但是获得编译错误类型"未定义"不能分配给类型"AbstractControlLike"。和错误TS2322:类型'number'不能分配给类型'FormGroup'.

get formmarray (): AbstractControl | null {return this.formGroup.get(' formmarray ');}

ngOnInit () {

this.bondTypesFeilds = bondTypes;

for (let bondType of this.bondTypesFeilds.form_fields) {
for (let k = 0; k < bondType.step[1].fields.length; k++) {
this.formGroup = this._formBuilder.group({
formArray: this._formBuilder.array([
bondType.step[0].formGroup = new FormGroup({
[bondType.step[1].fields[k].id ]: new FormControl('', [Validators.required])
})
])
});



}
}



<mat-step *ngFor="let bonds of bondTypesFeilds.form_fields;let p =index" formGroupName="0" [stepControl]="formArray?.get([p])" >
<form [formGroup]="p" *ngIf="renderLicenseForm()">

<div class="row">
<div class="col-md-8 text-right card">
<ng-container *ngFor="let fields of bonds.step[1].fields">
<div class="full-width">
<div *ngIf="fields.type == 'dropdownlist'">
<span class="labelpad">{{fields.question}}</span>
<mat-form-field appearance="fill">
<mat-select class="select-data" id={{fields.id}} formControlName={{fields.id}}
placeholder={{fields.placeholder_text}} 
>
<mat-option *ngFor="let s of statelist" value={{s.id}}>
{{s.text}} </mat-option>
</mat-select>
</mat-form-field>
</div>   
</div>
</div>
</div>
<div *ngIf="fields.type == 'sidefields'">
<span class="labelpad">{{fields.question}}</span>
<ng-container *ngFor="let sidefields of fields.side_fields">
<mat-form-field style="width: 26%;" appearance="fill"
*ngIf="sidefields.type == 'textbox'">
<input matInput placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
</mat-form-field>
&nbsp;
<mat-form-field style="width: 26%;" appearance="fill"
*ngIf="sidefields.type == 'dropdownlist'">
<mat-select placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
<mat-option *ngFor="let s of statelist" value={{s.id}}>
{{s.text}} </mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</div>
<div *ngIf="fields.type == 'section'">
<ng-container *ngFor="let sectionfields of fields.section_questions">
<div class="full-width">
<div *ngIf="sectionfields.type == 'dropdownlist'">
<span class="labelpad">{{sectionfields.question}}</span>
<mat-form-field appearance="fill">
<mat-select class="select-data" 
formControlName={{fields.id}}
placeholder={{sectionfields.placeholder_text}}
>
<mat-option *ngFor="let s of statelist" value={{s.id}}>
{{s.text}} </mat-option>
</mat-select>
</mat-form-field>
</div>
<div *ngIf="sectionfields.type == 'textarea'">
<span class="labelpad">{{sectionfields.question}}</span>
<mat-form-field appearance="fill">
<textarea matInput cdkTextareaAutosize
#autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5" 
placeholder={{sectionfields.placeholder_text}}
formControlName={{fields.id}}></textarea>
</mat-form-field>
</div>
<div *ngIf="sectionfields.type == 'textbox'">
<span class="labelpad">{{sectionfields.question}}</span>
<mat-form-field class="example-full-width" appearance="fill">
<input matInput 
placeholder={{sectionfields.placeholder_text}}
formControlName={{fields.id}}>
</mat-form-field>
</div>
<div *ngIf="sectionfields.type == 'checkbox'">
<mat-checkbox formControlName={{fields.id}}>{{sectionfields.question}}
</mat-checkbox>
</div>
<div class="row" style="margin-bottom: 10px;"
*ngIf="sectionfields.type == 'radiobutton'">
<div class="col-md-5">
<span class="label">{{sectionfields.question}}</span>
</div>
<div class="col-md-7 text-left" style="padding-left: 22px;">
<div>
<mat-radio-group class="radio-group"
(change)="radioChange($event)" formControlName={{fields.id}}>
<mat-radio-button class="matRadio" value="{{radiofields}}"
*ngFor="let radiofields of fields.options">
{{radiofields}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
</div>
<div *ngIf="sectionfields.type == 'sidefields'">
<span class="labelpad">{{sectionfields.question}}</span>
<ng-container *ngFor="let sidefields of sectionfields.side_fields">
<mat-form-field style="width: 26%;" appearance="fill"
*ngIf="sidefields.type == 'textbox'">
<input matInput placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
</mat-form-field>
&nbsp;
<mat-form-field style="width: 26%;" appearance="fill"
*ngIf="sidefields.type == 'dropdownlist'">
<mat-select placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
<mat-option *ngFor="let s of statelist" value={{s.id}}>
{{s.text}} </mat-option>
</mat-select>
</mat-form-field>
</ng-container>
</div>
</div>
</ng-container>
</div>
<div class="text-center" *ngIf="fields.type == 'sidebuttons'">
<ng-container *ngFor="let buttons of fields.side_buttons">
<button class="back-button" *ngIf="buttons.placeholder_text == 'Back'"
mat-button matStepperPrevious>{{buttons.placeholder_text}}</button>
<button class="next-button" *ngIf="buttons.placeholder_text == 'Next'"
mat-button matStepperNext (click)="onNextClick(bonds)">{{buttons.placeholder_text}}</button>
</ng-container>
</div>
</ng-container>
</div>
</div>
</form>
</mat-step>

Answer 1

似乎你打算使用一个Formbuilder。但是使用了FormGroup构造函数，它使用了不同的语法

this.formGroup = this._formBuilder.group({
formArray: this._formBuilder.array([
bondType.step[0].formGroup = new FormGroup({ <------------- HERE
[bondType.step[1].fields[k].id ]: new FormControl('', [Validators.required])
})
])
});