使用 hasError() 进行验证的表单生成器会引发 ERROR TypeError 的错误:无法读取未定义的属性“hasError" [英] Form Builder with hasError() for validation throws an error of ERROR TypeError: Cannot read property 'hasError' of undefined
本文介绍了使用 hasError() 进行验证的表单生成器会引发 ERROR TypeError 的错误:无法读取未定义的属性“hasError"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Form Builder 实现一个 angular 2 的表单
在 component.ts 中,我使用 formGroup 实现了我的表单
下面是我的代码
public myForm: FormGroup;构造函数(私有身份验证服务:AuthenticateService,私人_fb:FormBuilder){}ngOnInit() {this.myForm = this._fb.group({地址:[this.userDetails.address,[Validators.required]],address2: ['', [Validators.required]],城市:['', [Validators.required]],company_address: ['', [Validators.required]],company_address2: ['', [Validators.required]],company_city: ['', [Validators.required]],company_country: ['', [Validators.required]],公司: ['', [Validators.required , Validators.minLength(3)] ],company_tax_number: ['', [<any>Validators.required]],company_zip: ['', [<any>Validators.required, Validators.minLength(5), Validators.maxLength(7)]],国家:['', [Validators.required]],电子邮件:['', [Validators.required, Validators.email]],first_name: [this.userDetails.first_name, [<any>Validators.required]],id: ['', [Validators.required]],last_name: ['', [Validators.required]],电话:['', [Validators.required, Validators.minLength(10)]],zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],user_type: ['2', [Validators.required]],条款:[0,[Validators.required]],井号: [''],});}
它工作正常.但是在前端显示验证时
我是这样用的
<div class="col-lg-8"><label>地址 2</label><textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea><span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">公司地址 2 是必需的.</span>
它正在工作,但在控制台中抛出错误,如下所示
错误类型错误:无法读取未定义的属性hasError"
请帮我如何排序.
谢谢.
解决方案
你应该像这样使用它:
公司地址 2 是必需的 </span>
Hi I am implementing a form in angular 2 using Form Builder
in component.ts i have implemented my form using formGroup
Below is My code
public myForm: FormGroup;
constructor(private authenticateservice: AuthenticateService,
private _fb: FormBuilder
) {
}
ngOnInit() {
this.myForm = this._fb.group({
address: [this.userDetails.address, [<any>Validators.required]],
address2: ['', [<any>Validators.required]],
city: ['', [<any>Validators.required]],
company_address: ['', [<any>Validators.required]],
company_address2: ['', [<any>Validators.required]],
company_city: ['', [<any>Validators.required]],
company_country: ['', [<any>Validators.required]],
company: ['', [<any>Validators.required , Validators.minLength(3)] ],
company_tax_number: ['', [<any>Validators.required]],
company_zip: ['', [<any>Validators.required, Validators.minLength(5) , Validators.maxLength(7)]],
country: ['', [<any>Validators.required]],
email: ['', [<any>Validators.required, Validators.email]],
first_name: [this.userDetails.first_name, [<any>Validators.required]],
id: ['', [<any>Validators.required]],
last_name: ['', [<any>Validators.required]],
phone: ['', [<any>Validators.required, Validators.minLength(10)]],
zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],
user_type: ['2', [<any>Validators.required]],
terms: [0, [<any>Validators.required]],
hash_tag: [''],
});
}
It is working fine. But when coming to display validations in frontEnd
I used like this
<div class="form-group row">
<div class="col-lg-8">
<label>Address 2</label>
<textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
<span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is Required.</span>
</div>
</div>
it is working but throwing the error in console like Below
ERROR TypeError: Cannot read property 'hasError' of undefined
Please Help me how to sort this.
Thank You.
解决方案
You should use it like this:
<span class="help-block form-error text-danger small"
*ngIf="myForm.controls['company_address2'].errors?.required &&
myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
这篇关于使用 hasError() 进行验证的表单生成器会引发 ERROR TypeError 的错误:无法读取未定义的属性“hasError"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文