"hasError is not a function" error in Angular
Asked on September 10, 2018
Hi, I am creating a radio button using Angular Material.
<mat-radio-group name="gender" ngModel required #gender>
<mat-radio-button value="m">Male</mat-radio-button>
<mat-radio-button value="f">Female</mat-radio-button>
</mat-radio-group>
<div *ngIf="gender.hasError('required')">
Select gender.
</div>
When I run, getting error as below.
ERROR TypeError: "jit_nodeValue_6(...).hasError is not a function"
View_TemplateDrivenFormComponent_0ng:///AppModule/TemplateDrivenFormComponent.ngfactory.js:313:22debugUpdateDirectiveshttp://localhost:4200/vendor.js:52659:12checkAndUpdateViewhttp://localhost:4200/vendor.js:52056:5callViewActionhttp://localhost:4200/vendor.js:52297:21execComponentViewsActionhttp://localhost:4200/vendor.js:52239:13checkAndUpdateViewhttp://localhost:4200/vendor.js:52062:5callViewActionhttp://localhost:4200/vendor.js:52297:21execComponentViewsActionhttp://localhost:4200/vendor.js:52239:13checkAndUpdateViewhttp://localhost:4200/vendor.js:52062:5callWithDebugContexthttp://localhost:4200/vendor.js:52949:22debugCheckAndUpdateView
How to fix it?
Replied on September 10, 2018
You should use #gender as #gender="ngModel"
<mat-radio-group name="gender" ngModel required #gender="ngModel">
------
</mat-radio-group>
Now gender.hasError('required') will work
<div *ngIf="gender.hasError('required')">
Select gender.
</div>
------
</mat-radio-group>
Now gender.hasError('required') will work
<div *ngIf="gender.hasError('required')">
Select gender.
</div>
Replied on September 10, 2018
Working. Thanks.
