[Angular] Identifier 'required' is not defined. '__type' does not contain such a member

[Kurtz1993]

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.

[Kurtz1993]

Closing because duplicate of #149

[Ajinath07]

I have tried with above approach but it failed miserably.

Please look at this code -

This field is required

Minimum length should be {{username.errors.minlength.requiredLength}}

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

[Mallesh25nayak]

i tried same thing bu tnot getting out put

[Danielapariona]

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

[Mallesh25nayak]

First Name is required.

First Name should be minimum 3 character.

First Name doesn't Match pattern.

i tried this

[Mallesh25nayak]

<div *ngIf="firstName.errors.required">First Name is required. <div *ngIf="firstName.errors.minlength">First Name should be minimum 3 character.</div> <div *ngIf="firstName.errors.pattern">First Name doesn't Match pattern.</div> </div> i tried this

[danbete]

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

[heenamanglani]

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

I solved this issue adding ? before parameter and not after errors? But can you please elaborate it and try to explain how this issue is solved just by moving the question mark? @Danielapariona

[suprcodr]

this will solve the issue:
just add casting to bool using !! :

Passenger name is required.

This solved my issue! thanks!

[EeeEui]

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

It worked for me. Could you please tell me why should add "?"

[MianMahroz]

this also solve my issue just add ?

[medeirosjoaquim]

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.

[FeehGb]

try price['errors']['required']

[danbete]

@EeeEui the ? (safe navigation operator) will take a variable even if it's might be invalid and deal with the exception internally (invalid = false in this case).

[binDongKim]

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

[codermahadi]

#? didn't work f. !! only worked in angular 7+.

<div class="alert alert-danger" *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="!!username.errors.required">Username is required</div>
            <div *ngIf="!!username.errors.minlength">Username Should be minimum {{ !!username.errors.minlength.requiredLength }} Charecters.</div>
          </div>

[mhSangar]

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

TypeScript

[sathishiva]

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')

[dhair-seva]

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

[smallprogram]

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

TypeScript

Big Brother, this is too much trouble for you.

[prodplus]

Do *ngIf="yourForm.get('yourfield').hasError('required')"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}