vscode-ng-language-service: [Angular] Identifier 'required' is not defined. '__type' does not contain such a member

property errors of AbstractControlDirective

I have the following code:

<div>
    <label for="fullname">Passenger name:</label>
    <input
      type="text"
      name="fullname"
      required
      #fullname="ngModel"
      [ngModel]="detail?.fullname">

      <div class="error" *ngIf="fullname.errors?.required && fullname.dirty">
        Passenger name is required.
      </div>
  </div>

By using a property inside the errors property of the ngModel reference it shows me that error. This shouldn’t be an error since it’s valid syntax for template-driven forms.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 22

Most upvoted comments

this will solve the issue: just add casting to bool using !! : <div class=“error” *ngIf=“!!fullname.errors?.required && !!fullname.dirty”> Passenger name is required. </div>

Example try to add “?” after “price”. “<div *ngIf=“price?.errors.required”>Price is required.</div>”

This worked for me and it looks cleaner. <div class="error" *ngIf="fullname.hasError('required')"> this way is useful even if we handle custom validation as well such as fullname.hasError('invalidName')

But neither casting as boolean or using the ?(may not have) doesn’t solve the fact that the intelliSense can’t find the properties of errors.

try price[‘errors’][‘required’]

Do *ngIf=“yourForm.get(‘yourfield’).hasError(‘required’)”

It now seems like a problem with VSCode, because the error is still highlighted in my editor, but Angular does not detect it as so. What I did to resolve this for VSCode is check the error on the TypeScript side, with a function.

HTML

html

TypeScript

ts

Big Brother, this is too much trouble for you.

I had the same error. Doing *ngIf="formGroup?.get('fullName').hasError('required')" worked for me

It now seems like a problem with VSCode, because the error is still highlighted in my editor, but Angular does not detect it as so. What I did to resolve this for VSCode is check the error on the TypeScript side, with a function.

HTML

html

TypeScript

ts

? didn’t work for me. !! only worked in my case.

I have tried with above approach but it failed miserably.

Please look at this code -

<div *ngIf="username.errors.required">This field is required</div> <div *ngIf="username.errors.minlength">Minimum length should be {{username.errors.minlength.requiredLength}}</div>

Throwing error by TS compiler - [Angular] Identifier ‘required’ is not defined. ‘__type’ does not contain such a member