Form Builder with hasError() for validation throws an error of ERROR TypeError: Cannot read property 'hasError' of undefined
Form Builder with hasError() for validation throws an error of ERROR TypeError: Cannot read property 'hasError' of undefined
您好,我正在使用 Form Builder
在 angular 2 中实现一个表单
在 component.ts 我已经使用 formGroup
实现了我的表单
下面是我的代码
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: [''],
});
}
它工作正常。但是在前端显示验证时
我是这样用的
<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>
它正在工作,但在控制台中抛出如下错误
错误类型错误:无法读取未定义的 属性'hasError'
请帮我解决这个问题。
谢谢。
你应该这样使用它:
<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>
我在 angular 中遇到过这个问题 5 试试下面的方法你会得到输出
<mat-error>
<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>
</mat-error>
我是这样解决的:
<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>
如果您正在使用响应式表单,您应该可能使用 TypeScript getter 来解决这个问题,它更简洁:
In a reactive form, you can always access any form control through the
get method on its parent group, but sometimes it's useful to define
getters as shorthands for the template.
A getter 将允许您直接访问表单字段,避免在上面的示例中将 myForm.controls['fieldNameGoesHere'].
与 ngIf 冗余使用。
例如,对于 company_address2
,在 ngOnInit()
方法后添加以下内容:
get company_address2() { return this.myForm.get( 'company_address2' ); }
这将使您的组件 HTML 直接访问 company_address2
,试试这个:
<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="company_address2.hasError('required')">
Company Address 2 is Required.
</span>
不过,您将单独定义每个 getter 方法,TypeScript 不允许向 getter 提供变量,因此您最终会为每个方法使用一个 get 方法在您的表单中进行控制。
可以在 Form Validation: Built-in Validators 下的 Angular 文档中找到更多信息。
对于所需的错误消息,这一行应该有效
<mat-error>Title is required</mat-error>
您好,我正在使用 Form Builder
在 angular 2 中实现一个表单在 component.ts 我已经使用 formGroup
实现了我的表单下面是我的代码
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: [''],
});
}
它工作正常。但是在前端显示验证时
我是这样用的
<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>
它正在工作,但在控制台中抛出如下错误
错误类型错误:无法读取未定义的 属性'hasError'
请帮我解决这个问题。
谢谢。
你应该这样使用它:
<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>
我在 angular 中遇到过这个问题 5 试试下面的方法你会得到输出
<mat-error>
<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>
</mat-error>
我是这样解决的:
<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>
如果您正在使用响应式表单,您应该可能使用 TypeScript getter 来解决这个问题,它更简洁:
In a reactive form, you can always access any form control through the get method on its parent group, but sometimes it's useful to define getters as shorthands for the template.
A getter 将允许您直接访问表单字段,避免在上面的示例中将 myForm.controls['fieldNameGoesHere'].
与 ngIf 冗余使用。
例如,对于 company_address2
,在 ngOnInit()
方法后添加以下内容:
get company_address2() { return this.myForm.get( 'company_address2' ); }
这将使您的组件 HTML 直接访问 company_address2
,试试这个:
<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="company_address2.hasError('required')">
Company Address 2 is Required.
</span>
不过,您将单独定义每个 getter 方法,TypeScript 不允许向 getter 提供变量,因此您最终会为每个方法使用一个 get 方法在您的表单中进行控制。
可以在 Form Validation: Built-in Validators 下的 Angular 文档中找到更多信息。
对于所需的错误消息,这一行应该有效
<mat-error>Title is required</mat-error>