
本文介绍了类型“AbstractControl"Angular 4 上不存在属性“控件"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在 Angular 4 中尝试嵌套的反应形式.它工作正常,但是当我尝试构建 AOT 时,它抛出错误
类型AbstractControl"上不存在controls"
我用谷歌搜索并尝试了几件事,但没有运气.谁能告诉我如何解决这个问题?
<div formArrayName="地址"><div *ngFor="let address of myForm.get('addresses').controls; let i=index"class="面板面板-默认"><span *ngIf="myForm.get('addresses').length > 1"(click)="removeAddress(i)">Remove</span><div [formGroupName]="i"><mat-form-field><input matInput formControlName="city" placeholder="city" value=""></mat-form-field>
<a (click)="addAddress()" style="cursor: default">添加 +
下面的打字稿代码
构造函数(私有_fb:FormBuilder){}ngOnInit() {this.myForm = this._fb.group({地址:this._fb.array([this.initAddress(),])});}initAddress() {返回 this._fb.group({城市: ['']});}添加地址(){const control = <FormArray>this.myForm.get('addresses');control.push(this.initAddress());}removeAddress(i: number) {const control = <FormArray>this.myForm.get('addresses');control.removeAt(i);}
解决方案
基于@Günter Zöchbauer 的评论,首先我改变了
myForm.controls['addresses']
到 myForm.get('addresses')
在 html 和 typescript
然后基于@yuruzi评论
将 myForm.get('addresses').controls
更改为 myForm.get('addresses')['controls']
它现在工作正常.谢谢@gunter &玉如子
I am trying a nested reactive form in Angular 4. It is working fine but when I try to build AOT it's throwing the error
I googled and tried few things but no luck. Could anyone tell me how to fix this issue?
<div [formGroup]="myForm">
<div formArrayName="addresses">
<div *ngFor="let address of myForm.get('addresses').controls; let i=index"
class="panel panel-default">
<span *ngIf="myForm.get('addresses').length > 1"
(click)="removeAddress(i)">Remove</span>
<div [formGroupName]="i">
<mat-form-field>
<input matInput formControlName="city" placeholder="city" value="">
</mat-form-field>
</div>
</div>
</div>
<a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>
typescript code below
constructor(private _fb: FormBuilder) {
}
ngOnInit() {
this.myForm = this._fb.group({
addresses: this._fb.array([
this.initAddress(),
])
});
}
initAddress() {
return this._fb.group({
city: ['']
});
}
addAddress() {
const control = <FormArray>this.myForm.get('addresses');
control.push(this.initAddress());
}
removeAddress(i: number) {
const control = <FormArray>this.myForm.get('addresses');
control.removeAt(i);
}
解决方案
Based on @Günter Zöchbauer comments , first i changed
myForm.controls['addresses']
to myForm.get('addresses')
in both html and typescript
and then based on @yuruzi comment
changed myForm.get('addresses').controls
to myForm.get('addresses')['controls']
Its working fine now. Thanks @gunter & yuruzi
这篇关于类型“AbstractControl"Angular 4 上不存在属性“控件"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!