不能编译的响应表单

Question

我正在做一个angular 10应用程序。我有一个组件是另一个组件的子组件。这是模板

<form [formGroup]="localForm">
<mat-checkbox formControlName="flag1">{{labelCheckBox}}</mat-checkbox>
(line15)
<mat-radio-group
*ngIf="localForm?.controls['flag1']?.value"
class="radio-vertical"
formControlName="flag2">
<mat-radio-button value="{{localForm?.controls['flag2']?.value}}">text1</mat-radio-button>
<mat-radio-button value="{{!localForm?.controls['flag2']?.value}}">text2</mat-radio-button>
</mat-radio-group>
<div *ngIf="localForm?.controls['flag1']?.value" formArrayName="datas">
<div
*ngFor="let dataTerm of datas.controls; let index = index;"
formControlName="index">
<mat-form-field
*ngIf="localForm?.controls['datas'][index].controls['code']?.value === '00' && localForm?.controls['flag2'].value">
<mat-label>text3</mat-label>
<mat-select formControlName="modeI">
<mat-option [value]=""></mat-option>
<mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field
*ngIf="localForm?.controls['datas'][index].controls['code']?.value != '00' && !localForm?.controls['flag2'].value">
<mat-label>{{localForm?.controls['datas'][index].controls['typeRecu']?.value}}</mat-label>
<mat-select formControlName="modeI">
<mat-option [value]=""></mat-option>
<mat-option *ngFor="let ta of modes | keyvalue" [value]="ta.key">{{ ta.value }}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</form>

在构造函数中，我初始化了formGroup

export class myComponent implements OnInit {
localForm: FormGroup;
@Input()
labelCheckBox!: string;
@Input()
modes!: Record<string, string>;
constructor() {
this.localForm = new FormGroup({
property1: new FormControl(""),
property2: new FormControl(""),
property3: new FormControl(""),
property4: new FormControl(""),
property5: new FormControl(""),
property6: new FormControl(""),
property7: new FormControl(""),
property8: new FormControl("250", [Validators.required]),
property9: new FormControl("", [Validators.required]),
property10: new FormControl("", [Validators.required]),
property11: new FormControl({ value: 0, disabled: true }, [
Validators.required,
]),
property12: new FormControl(0, []),
property13: new FormControl({ value: "", disabled: true }, [
Validators.required,
]),
flag2: new FormControl(true),
flag1: new FormControl(false),
datas: new FormArray([
new FormGroup({
modeI: new FormControl("val11"),
co: new FormControl("val12"),
tR: new FormControl("val13"),
tF: new FormControl("val14"),
}),
new FormGroup({
modeI: new FormControl("val21"),
co: new FormControl("val22"),
tR: new FormControl("val23"),
tF: new FormControl("val24"),
}),
new FormGroup({
modeI: new FormControl("val31"),
co: new FormControl("val32"),
tR: new FormControl("val33"),
tF: new FormControl("val34"),
}),
new FormGroup({
modeI: new FormControl("val41"),
co: new FormControl("val42"),
tR: new FormControl("val43"),
tF: new FormControl("val44"),
}),
new FormGroup({
modeI: new FormControl("val51"),
co: new FormControl("val52"),
tR: new FormControl("val53"),
tF: new FormControl("val51"),
}),
new FormGroup({
modeI: new FormControl("val61"),
co: new FormControl("val62"),
tR: new FormControl("val63"),
tF: new FormControl("val64"),
}),
new FormGroup({
modeI: new FormControl("val71"),
co: new FormControl("val72"),
tR: new FormControl("val73"),
tF: new FormControl("val74"),
}),
new FormGroup({
modeI: new FormControl("val81"),
co: new FormControl("val82"),
tR: new FormControl("val83"),
tF: new FormControl("val84"),
}),
]),
});
}
}

我有两个错误

TypeError: this.form._updateTreeValidity is not a function
_updateDomValue form_group_directive.ts:271
ngOnChanges form_group_directive.ts:94
Angular 6
MyComponent_Template mycomponent.ts:15

和

TypeError: this.form.get is not a function
addControl form_group_directive.ts:132
_setUpControl form_control_name.ts:223
ngOnChanges form_control_name.ts:146
Angular 6
MyComponent_Template mycomponent.ts:15

更新我替换了

<div
*ngFor="let dataTerm of datas.controls; let index = index;"
formControlName="index">

<div *ngFor="let dataTerm of localForm.controls.datas; let i = index;" [formControlName]="i">

下面用I替换index但我仍然得到两个错误。

第二更新

我现在使用"@ng-stack/forms">

模板

<form *ngIf="localForm" [formGroup]="localForm">
</form>

这是组件

export class MyComponent implements OnInit {
@Input()
form!: FormGroup<DeepRequired<myBean>>
localForm: FormGroup<DeepRequired<myBean>> | undefined;
constructor() {
}
ngOnInit() {
this.localForm = Object.assign({}, this.form);
}
}

我仍然得到错误

TypeError: this.form._updateTreeValidity is not a function
_updateDomValue form_group_directive.ts:271
ngOnChanges form_group_directive.ts:94
Angular 34

Answer 1

模板中:

1. 在第13行(*ngFor="let dataTerm of datas.controls; let index = index;"):你的组件中没有属性，也没有名为datas的模板引用变量。你可能是指localForm.controls.datas?
2. 在第14行(formControlName="index")中，您需要绑定到index->[formControlName]="index"

Answer 2

最后，我通过添加以下模板

解决了这个问题

<div [formGroup]="formGroup">
<mat-checkbox [formControlName]="'flag1'">{{labelCheckBox}}</mat-checkbox>
<mat-radio-group class="radio-vertical" *ngIf="formGroup.get('flag1')!.value"
[formControlName]="'flag2'">
<mat-radio-button [checked]="formGroup.get('flag2')!.value"
[value]="true">text1</mat-radio-button>
<mat-radio-button [checked]="!formGroup.get('flag2')!.value"
[value]="false">text2</mat-radio-button>
</mat-radio-group>
<div *ngFor="let dataTerm of datas"  >
<mat-grid-list  cols="2" rowHeight="3:1" *ngIf="dataTerm.get('tR').value === '00' && formGroup.get('flag1').value && formGroup.get('flag2').value">
<mat-grid-tile >
<label>
text3
</label>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<mat-select  [formControl]="dataTerm.get('modeI')" >
<mat-option [value]="''"></mat-option>
<mat-option *ngFor="let ta of modes | keyvalue"
[value]="ta.key">{{ ta.value }}</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list  cols="2" rowHeight="3:1" *ngIf="dataTerm.get('tR').value !== '00' && formGroup.get('flag1').value && !formGroup.get('flag2').value">
<mat-grid-tile >
<label>
{{ text4
</label>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<mat-select  [formControl]="dataTerm.get('modeI')" >
<mat-option [value]="''"></mat-option>
<mat-option *ngFor="let ta of modes | keyvalue"
[value]="ta.key">{{ ta.value }}</mat-option>
</mat-select>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</div>
</div>

export class myComponent {

@Input()
formGroup!: FormGroup<Required<GlobalBean>>

@Input()
labelCheckBox!: string;
@Input()
modes!: Record<string, string>;

get datas()
{
return this.formGroup?.get('datas')?.controls|| [];
}

讨论结束。谢谢你

Answer 3

Flamant，关于你的解决方案的一些事情

1。-删除mat-radio-button中的[checked]，你在mat-radio-group中还没有formControlName，

2。-你可以使用简单的formControlName="flag"，不需要[formControlName]="'flag'"

3。-这是一个比getter "datas"更好的方法。是formArray

get datas()
{
return this.formGroup.get('datas') as FormArray
}

然后像

一样管理FormArray

<div formArrayName="datas">
<div *ngFor="let dataTerm of datas.controls;let i=index" [formGroupName]="i">
<!--you can use to check one value of the formArray-->
<div *ngIf="dataTerm.value.rT=='0'">it's 0</div>
<!--or-->
<div *ngIf="dataTerm.get('rT').value=='0'">it's 0</div>
<!--or-->
<div *ngIf="datas.at(i).get('rT').value=='0'">it's 0</div>
<!--or-->
<div *ngIf="formGroup.get('data.'+i+'.rT').value=='0'">it's 0</div>

<!--an input in mat-select simple use formControlName-->
<mat-select formControlName="modeI">
..
<mat-select>
<!--an input simple use formControlName-->
<input matInput formControlName="rT">
</div>