我在Angular 4中尝试嵌套的反应形式。它工作正常但是当我尝试构建AOT时它会抛出错误
'AbstractControl'类型中不存在'controls'
我用Google搜索并尝试了一些事情,但没有运气。谁能告诉我如何解决这个问题?
<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>
下面的打字稿代码
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);
}
基于@GünterZöchbauer评论,首先我改变了
在html和打字稿中myForm.controls['addresses']
到myForm.get('addresses')
然后基于@yuruzi评论
将myForm.get('addresses').controls
改为myForm.get('addresses')['controls']
它的工作正常。谢谢@gunter&yuruzi
你可以轻松修复它。将“获取控件”逻辑外包到组件代码的方法(.ts
文件):
`getControls() {
return (this.recipeForm.get('controlName') as FormArray).controls;
}`
在模板中,您可以使用:
*ngFor="let ingredientCtrl of getControls(); let i = index"
由于TS的工作方式和Angular解析模板(它不了解TS),因此需要进行此调整。
作为@sunny kashyap解决方案的更新,我会这样写:
getControls() {
return (this.recipeForm.get('controlName') as FormArray).controls;
}
要获得FormArray
的长度,请使用length
:
<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>
希望能帮助到你
将myForm.get('addresses').controls
更改为myForm.get('addresses').value
也将解决问题。
对于验证错误使用...
<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>
例如。
<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>
ts文件
get f(): any {
return this.userForm.controls;
}