不编译的reactiveform [英] reactiveform that does not compile
问题描述
我正在开发一个 angular 10 应用程序.我有一个组件是另一个组件的子组件.这是模板
</表单>
在构造函数中,我初始化了 formGroup
export class myComponent 实现 OnInit {本地表单:表单组;@输入()labelCheckBox!: 字符串;@输入()模式!:记录<字符串,字符串>;构造函数(){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: 新的 FormControl(0, []),property13: new FormControl({ value: "", disabled: true }, [Validators.required,]),标志2:新的FormControl(真),标志1:新的FormControl(假),数据:新的 FormArray([新表单组({模式I:新的FormControl(val11"),co: new FormControl("val12"),tR: new FormControl("val13"),tF: new FormControl("val14"),}),新表单组({模式I:新的FormControl(val21"),co: new FormControl("val22"),tR: new FormControl("val23"),tF: new FormControl("val24"),}),新表单组({模式I:新的FormControl(val31"),co: new FormControl("val32"),tR: new FormControl("val33"),tF: new FormControl("val34"),}),新表单组({模式I:新的FormControl(val41"),co: new FormControl("val42"),tR: new FormControl("val43"),tF: new FormControl("val44"),}),新表单组({模式I:新的FormControl(val51"),co: new FormControl("val52"),tR: new FormControl("val53"),tF: new FormControl("val51"),}),新表单组({模式I:新的FormControl(val61"),co: new FormControl("val62"),tR: new FormControl("val63"),tF: new FormControl("val64"),}),新表单组({模式I:新的FormControl(val71"),co: new FormControl("val72"),tR: new FormControl("val73"),tF: new FormControl("val74"),}),新表单组({模式I:新的FormControl(val81"),co: new FormControl("val82"),tR: new FormControl("val83"),tF: new FormControl("val84"),}),]),});}}
我有两个错误
TypeError: this.form._updateTreeValidity 不是函数_updateDomValue form_group_directive.ts:271ngOnChanges form_group_directive.ts:94角 6MyComponent_Template mycomponent.ts:15
和
TypeError: this.form.get 不是函数addControl form_group_directive.ts:132_setUpControl form_control_name.ts:223ngOnChanges form_control_name.ts:146角 6MyComponent_Template mycomponent.ts:15
更新
我换行
由
我在下面用 i 替换了 index但我仍然收到两个错误.
第二次更新
我现在使用来自@ng-stack/forms"的 FormGroup
这是模板
这是组件
导出类 MyComponent 实现 OnInit {@输入()表单!:FormGroup>localForm:FormGroup>|不明确的;构造函数(){}ngOnInit() {this.localForm = Object.assign({}, this.form);}}
我仍然收到错误
TypeError: this.form._updateTreeValidity 不是函数_updateDomValue form_group_directive.ts:271ngOnChanges form_group_directive.ts:94角 34
解决方案 Flamant,关于你的解决方案的一些事情
1.-删除mat-radio-button中的[checked]
,mat-radio-group中还有formControlName,
2.-您可以使用简单的formControlName=flag"
,不需要[formControlName]='flag'"
3.-getterdatas"是一个更好的方法.是 formArray
获取数据(){返回 this.formGroup.get('datas') 作为 FormArray}
你管理 FormArray 就像
<div *ngFor="let dataTerm of datas.controls;let i=index";[formGroupName]=i"><!--可以用来检查formArray的一个值--><div *ngIf="dataTerm.value.rT=='0'">它是 0</div><!--或--><div *ngIf="dataTerm.get('rT').value=='0'">它是 0</div><!--或--><div *ngIf="datas.at(i).get('rT').value=='0'">它是 0</div><!--或--><div *ngIf="formGroup.get('data.'+i+'.rT').value=='0'">它是 0</div><!--在 mat-select 中输入简单使用 formControlName--><mat-select formControlName="modeI">..<mat-select><!--一个输入简单的使用formControlName--><input matInput formControlName="rT">
I am working on an angular 10 application. I have a component that is a child of another component.
Here is the template
<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>
and in the constructor, I initialise the 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"),
}),
]),
});
}
}
And I have two errors
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
and
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
UPDATE
I replace the line
<div
*ngFor="let dataTerm of datas.controls; let index = index;"
formControlName="index">
by
<div *ngFor="let dataTerm of localForm.controls.datas; let i = index;" [formControlName]="i">
and I replaced index by i underneath
but I still get the two errors.
SECOND UPDATE
I now use FormGroup from "@ng-stack/forms"
Here is the template
<form *ngIf="localForm" [formGroup]="localForm">
</form>
Here is the component
export class MyComponent implements OnInit {
@Input()
form!: FormGroup<DeepRequired<myBean>>
localForm: FormGroup<DeepRequired<myBean>> | undefined;
constructor() {
}
ngOnInit() {
this.localForm = Object.assign({}, this.form);
}
}
And I still get the error
TypeError: this.form._updateTreeValidity is not a function
_updateDomValue form_group_directive.ts:271
ngOnChanges form_group_directive.ts:94
Angular 34
解决方案 Flamant, a few things about your solution
1.-remove the [checked]
in mat-radio-button, you has yet formControlName in the mat-radio-group,
2.-You can use simple formControlName="flag"
, not need [formControlName]="'flag'"
3.-It's a better aproach that the getter "datas" was the formArray
get datas()
{
return this.formGroup.get('datas') as FormArray
}
And you mannage the FormArray like
<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>
这篇关于不编译的reactiveform的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文