Vscode-ng-language-service: Support optional chaining in template

I have the same issue, but none of the proposed solutions have worked:
"form?.get('name').errors.required"
"form?.get('name').errors.['required']"
"form?.get('name').errors?.required"

Hello try it like this.
Form.hasError('required');

That worked for me. Thanks @antonheck

there are a few workarounds, each better for different situation, yes. But that is not the issue. I shouldn't have to write my code differently, including ugly, hacky sintaxe, only to appease an IDE extension, when what I wrote was right from the start.

I have exactly same problem and message with this similar code :

class MyComponent {
  form: FormGroup;
}

with lines like this in the template :

<app-errors [control]="form.controls.email">

Error message :

Identifier 'email' is not defined. '__type' does not contain such a member

Problem is caused by fields of type like (it occurs with AbstractControl or something else of course) :

{  [key: string]: AbstractControl;  };

I have this message in Visual Studio Code (Windows) and Angular Language Services, but not with ng lint.

Best solution so far:

Try prepend "!!".
Although it is tricky,
I succeeded this way.

_from: https://github.com/angular/vscode-ng-language-service/issues/126#issuecomment-366200219_

Thanks tmrony, best solution after many days searching...

Actually it's supposed to be like this, the error highlight is shown because the "errors" property of "AbstractControl" has no strictly defined properties, it's of type "ValidationErrors"

So directly accessing a validation rule is causing the error, in my case accessing it using square bracket notation solves the issue.

(btw even if i access the validation property directly i am not getting compilation errors, the app works fine either way)

The other way to do this is to use "hasError" method of the control:

   <span *ngIf="(firstName.dirty || firstName.touched) && firstName.hasError('required')">First name is required.</span>

@boban984 Solution worked....

@adickenscheidt Solution worked for me! thanks

"price.errors['required']" --> Worked
"!!price.errors.required" --> Worked

"price?.errors?.required" should also work, because my "fullname?.errors?.required" works

"price.errors['required']" --> Worked

That doesn't trigger the compiler 'identifier is not defined' but it's not a good solution, because if errors object is null, it will error on the console about it.

@boban984
this is the winner solution and explanation.

I was glad to find the hasError() method discussed here, it's certainly the clearest way to show the intent of the template conditional and I think I'll try to use it exclusively going forward.

However... nobody is addressing the root cause of the problem, and it's been an issue with the language service for something like a year now. The errors property has a key index signature ([key: string]: any) which means that in TS code, the statement myControl.errors.anythingYouLike will compile cleanly, no matter what strict-mode flags you have set. This is correct, because the entire point of having an index signature like that is to be able to create arbitrary properties at runtime, and access them by either dot-notation or index-notation. The language service allows index-notation, which is why control?.errors['required'] works, but flags dot-notation as incorrect, which is an error.

three solutions:

<span *ngIf=" username.errors['email']">must be email</span>

<span *ngIf="!!username?.errors.email">must be email</span>

<span *ngIf="username.hasError('email')">must be email</span>

I like the third best

@boban984 Great solution and explanation

thnks, works for me!. 👍🏼
i hate view Errors on console 😬

Hello try it like this.
Form.hasError('required');

This was the most elegant solution, and really works for all cases: myForm.hasError('required', 'myField').

Thanks @antonheck

Hello try it like this.
Form.hasError('required');

This was the most elegant solution, and really works for all cases: myForm.hasError('required', 'myField').

It works, but the best solution based on simplicity was offered by @boban984: "myField.hasError('required')". :)

I solved this problem in this way:

• example.component.ts:

this.myForm = this.formBuilder.group({
      field: ['', [Validators.required, Validators.maxLength(10)]]
});

get getField() { return this.myForm.get('field'); }

• example.component.html:

<div *ngIf="getField.errors" class="invalid-feedback">
  <div *ngIf="getField.hasError('required')"> Text required </div>
  <div *ngIf="getField.hasError('maxlength')"> Text maxLength </div>
</div>

I hope to be helpful.

Perfect @bePericon this works for me!
Thanks!

<input type="text" formControlName="name" class="form-control" placeholder="Full name"> <div *ngIf="submitted && f['name'].errors" class="alert alert-danger"> <div *ngIf="f['name'].errors.required">Full Name is required</div> </div>
This worked for me in Angular 7

So after two years, it has not been fixed? 🤣
related: https://github.com/angular/vscode-ng-language-service/issues/110

So after two years, it has not been fixed? 🤣
related: #110

It's not a bug, it's exactly the way it should work

If this is expected functionality, can the documentation be updated? (see here for one example).

This clearly infers the raw property accessors of ngModel can be used, where this thread has established they definitely cannot.

Actually is it fixed? I switched to hasError ages ago, but now I'm trying and failing to reproduce the error. myControl.errors.maxlength doesn't generate any red squiggly for me. This is with language service extension 0.801.1, which uses v8.1.x of the library, if that helps.

@thw0rted so, upon retest with myControl.errors.required and .pattern and (realized I missed the required attribute on the input tag, which was causing a bigger failure), they don't quite work.

Required mostly works, though there were some odd errors that popped up (missed capturing them and they're inconsistent unfortunately), and pattern fires when the pattern is wrong but doesn't seem to update when the pattern's correct.

Also, I have the same vsCode language extension, and I still see squigglies strangely.

Going to stick with .hasError solution for the moment, and probably would still recommend the docs get updated, at least to have that as a clearer/best practice use.

I found that this error appears every time you reference a property which is defined as 'any'. Another workaround is using the bracket property annotation, clientFirstName?.errors['required'] which is also pretty stupid.

This removed the errors for me. For reference, the code worked even when the errors were outlined, I just don't like seeing red lines in my code.

Yes putting in the key as a string removes the red lines.

But you lose features like correct spelling and auto-completion with this.

in addition to using hasError(), accessing a form's child control should use get() rather that dot access. e.g.

class MyComponent {
  form: FormGroup;
}

with lines like this in the template :

<app-errors [control]="form.controls.email">

Error message :

Identifier 'email' is not defined. '__type' does not contain such a member

solution would be:

<app-errors [control]="form.get('email')">

Same issue.

f.email.errors.email.required Fails
!!f.email.errors.email.required Fails
f.email?.errors.email.required Fails
f?.email?.errors.email.required Fails
f.email.error.['required'] Fails
f.email?.error.['required'] Fails

This worked for me:

f['email'].errors.required

Should be fixed with https://github.com/angular/angular/pull/33884.

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._}