Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support indexed types #126

Closed
virgil-av opened this issue Jul 7, 2017 · 32 comments
Closed

Support indexed types #126

virgil-av opened this issue Jul 7, 2017 · 32 comments
Assignees
Labels

Comments

@virgil-av
Copy link

When using reactive forms, in the HTML template I get the error in the title.

<ion-item *ngIf="formRegister.controls.company.invalid && formRegister.controls.company.touched">

Please enter a valid name.


Both "formRegister.controls.company.invalid && formRegister.controls.company.touched" are underlined as an error but the app works just fine.

@chuckjaz
Copy link
Contributor

chuckjaz commented Jul 7, 2017

@virgil-av Can you create a repository that reproduces this issue?

@wupaz
Copy link

wupaz commented Jul 14, 2017

We have same issue with union type. Like

public Hour: TimeSpan | string;

Error:
Identifier 'hhMM' is not defined. '' does not contain such a member

hhMM is a valid member in TimeSpan but it seem Hour is treated like a any ;(

@chuckjaz
Copy link
Contributor

chuckjaz commented Jul 19, 2017

@wupaz You example is expected as string does not hhMM as a member and a union type only has the members the constituent types have in common.

TypeScript reports a similar error

@benjaminRomano
Copy link

I'm also experiencing this issue with reactive forms.

A temporary workaround is to access the property using a bracket propety accessor expression.

formRegister.controls['company'].invalid

@intellix
Copy link

Also getting this actually. I believe this used to be an issue in TS as well but seems to be working now for me. At least in TS 2.4.0 and Angular 4.3.0:

Here's the type definition for the FormGroup.controls property: https://github.com/angular/angular/blob/master/packages/forms/src/model.ts#L832

(property) FormGroup.controls: {
    [key: string]: AbstractControl;
}

These both work in TS for me but dot notation complains within the language service:

form.controls['birthday']
form.controls.birthday

@unstephenk
Copy link

@intellix Same here

@PascalAOMS
Copy link

Same in v2.5.2.

@alikarimii
Copy link

i have the same problem in tsc v2.5.2 as friends said

@hlovdal
Copy link

hlovdal commented Nov 9, 2017

Can you create a repository that reproduces this issue?

@chuckjaz I can create something better: no repository.

Because I have tested and found that this issue is not related to the source code or npm packages at all. I started having this problem and then tested logging in as a different user, starting visual studio code in the very same directory and then I did not get the error in that editor.

error_screenshot

This is also consistent with that the error only shows up in the editor and the compiler does not complain when building.

So, obviously a per user difference. Then I tested removing the config directory, and the problem went away. When moving the old directory back again the problem re-appears.

$ mv  ~/.config/{,old.}Code
$ code .
$ mv  ~/.config/{,new.}Code
$ mv  ~/.config/{old.,}Code
$ code .

So some cruft has gotten into the config directory that triggers this (some cache would be my guess). When hovering the mouse over valid of name.valid right after starting the editor, a tooltip of "Loading..." displays for several seconds before disappearing and the error occurs. Second time and later, the error is displayed right away when hovering.

@hlovdal
Copy link

hlovdal commented Nov 17, 2017

I tracked down the user difference, and it is the instalment of the vscode extension Angular.ng-template version 0.1.7. And I can now also provide a repository which reproduces this issue:

  1. Clone https://github.com/colinskow/angular-electron-dream-starter
  2. Apply the attached patch.
  3. Open src/app/hero-form.component.html.
  4. a) With Angular.ng-template installed, name.valid and four other identifiers will get red underlining (and [Angular] Identifier 'valid' is not defined. 'NgModel' does not contain such a member tooltip errors).
    b) With Angular.ng-template not installed or disabled, no errors occur.

The patch is relative to v7.0.0, but I also tested it against commit bd5ad5f0 (Feature/ng2 rc5 (#875)) from 2016-08-21 which is the first commit to contain src/app/app.module.ts, and the error occurred there as well, so I assume this is a problem for all versions of that repo.

Since angular-electron-dream-starter is a fork of https://github.com/AngularClass/angular-starter, I tested the patch in that repo as well, and there the problem does not occur but instead the tooltip contains valid information:

no error

Originally tested on vscode version 1.17.2 (commit b813d129). After updating to version 1.8.0 (commit dcee22027) the result is the same.


Due to Github's utterly stupid attachment handling, the patch is base64 encoded here:

RnJvbSAyYzgxMTJmYzJhM2I2M2FkZjVmZjA0MDQ3NTcyNjAyMjc2ZWMwYmZiIE1vbiBTZXAgMTcg
MDA6MDA6MDAgMjAwMQpGcm9tOiA9P1VURi04P3E/SD1DMz1BNWtvbj0yMEw9QzM9Qjh2ZGFsPz0g
PGtvZGVAZGVua3VsZS5ubz4KRGF0ZTogRnJpLCAxNyBOb3YgMjAxNyAyMDozMDoyMCArMDEwMApT
dWJqZWN0OiBbUEFUQ0hdIEltcG9ydCBvZiBleGFtcGxlIGZyb20gaHR0cHM6Ly9hbmd1bGFyLmlv
L2d1aWRlL2Zvcm1zCgotLS0KIHNyYy9hcHAvYXBwLmNvbXBvbmVudC5odG1sICAgICAgIHwgNDAg
KysrKysrKysrKysrKysrKysrKysrKysrKysrCiBzcmMvYXBwL2FwcC5tb2R1bGUudHMgICAgICAg
ICAgICB8ICA1ICsrKy0KIHNyYy9hcHAvaGVyby1mb3JtLmNvbXBvbmVudC5odG1sIHwgNTggKysr
KysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKwogc3JjL2FwcC9oZXJvLWZvcm0u
Y29tcG9uZW50LnRzICAgfCAyMSArKysrKysrKysrKysrKysKIHNyYy9hcHAvaGVyby50cyAgICAg
ICAgICAgICAgICAgIHwgIDkgKysrKysrKwogNSBmaWxlcyBjaGFuZ2VkLCAxMzIgaW5zZXJ0aW9u
cygrKSwgMSBkZWxldGlvbigtKQogY3JlYXRlIG1vZGUgMTAwNjQ0IHNyYy9hcHAvYXBwLmNvbXBv
bmVudC5odG1sCiBjcmVhdGUgbW9kZSAxMDA2NDQgc3JjL2FwcC9oZXJvLWZvcm0uY29tcG9uZW50
Lmh0bWwKIGNyZWF0ZSBtb2RlIDEwMDY0NCBzcmMvYXBwL2hlcm8tZm9ybS5jb21wb25lbnQudHMK
IGNyZWF0ZSBtb2RlIDEwMDY0NCBzcmMvYXBwL2hlcm8udHMKCmRpZmYgLS1naXQgYS9zcmMvYXBw
L2FwcC5jb21wb25lbnQuaHRtbCBiL3NyYy9hcHAvYXBwLmNvbXBvbmVudC5odG1sCm5ldyBmaWxl
IG1vZGUgMTAwNjQ0CmluZGV4IDAwMDAwMDAuLmY4YWE1N2EKLS0tIC9kZXYvbnVsbAorKysgYi9z
cmMvYXBwL2FwcC5jb21wb25lbnQuaHRtbApAQCAtMCwwICsxLDQwIEBACis8bmF2PgorCTxhIFty
b3V0ZXJMaW5rXT0iIFsnLi8nXSAiCisJCXJvdXRlckxpbmtBY3RpdmU9ImFjdGl2ZSIgW3JvdXRl
ckxpbmtBY3RpdmVPcHRpb25zXT0gIntleGFjdDogdHJ1ZX0iPgorCQlJbmRleAorCTwvYT4KKwk8
YSBbcm91dGVyTGlua109IiBbJy4vaG9tZSddICIKKwkJcm91dGVyTGlua0FjdGl2ZT0iYWN0aXZl
IiBbcm91dGVyTGlua0FjdGl2ZU9wdGlvbnNdPSAie2V4YWN0OiB0cnVlfSI+CisJCUhvbWUKKwk8
L2E+CisJPGEgW3JvdXRlckxpbmtdPSIgWycuL2RldGFpbCddICIKKwkJcm91dGVyTGlua0FjdGl2
ZT0iYWN0aXZlIiBbcm91dGVyTGlua0FjdGl2ZU9wdGlvbnNdPSAie2V4YWN0OiB0cnVlfSI+CisJ
CURldGFpbAorCTwvYT4KKwk8YSBbcm91dGVyTGlua109IiBbJy4vYmFycmVsJ10gIgorCQlyb3V0
ZXJMaW5rQWN0aXZlPSJhY3RpdmUiIFtyb3V0ZXJMaW5rQWN0aXZlT3B0aW9uc109ICJ7ZXhhY3Q6
IHRydWV9Ij4KKwkJQmFycmVsCisJPC9hPgorCTxhIFtyb3V0ZXJMaW5rXT0iIFsnLi9hYm91dCdd
ICIKKwkJcm91dGVyTGlua0FjdGl2ZT0iYWN0aXZlIiBbcm91dGVyTGlua0FjdGl2ZU9wdGlvbnNd
PSAie2V4YWN0OiB0cnVlfSI+CisJCUFib3V0CisJPC9hPgorPC9uYXY+CisKKzxtYWluPgorCTxh
cHAtaGVyby1mb3JtPjwvYXBwLWhlcm8tZm9ybT4KKwk8cm91dGVyLW91dGxldD48L3JvdXRlci1v
dXRsZXQ+Cis8L21haW4+CisKKzxwcmUgY2xhc3M9ImFwcC1zdGF0ZSI+dGhpcy5zdGF0ZSQgPSB7
eyBzdGF0ZSQgfCBhc3luYyB8IGpzb24gfX08L3ByZT4KKworPGZvb3Rlcj4KKwk8c3Bhbj4KKwkJ
QW5ndWxhciBFbGVjdHJvbiBEcmVhbSBTdGFydGVyIGJ5IDxhIChjbGljayk9Im9wZW5VUkwodXJs
KSIgaHJlZj0iIyI+QENvbGluU2tvdzwvYT4KKwk8L3NwYW4+CisJPGRpdj4KKwkJPGEgW2hyZWZd
PSJ1cmwiPgorCQkJPGltZyBbc3JjXT0iYW5ndWxhcmNsYXNzTG9nbyIgd2lkdGg9IjI1JSI+CisJ
CTwvYT4KKwk8L2Rpdj4KKzwvZm9vdGVyPgpkaWZmIC0tZ2l0IGEvc3JjL2FwcC9hcHAubW9kdWxl
LnRzIGIvc3JjL2FwcC9hcHAubW9kdWxlLnRzCmluZGV4IGZlYzI0NTcuLjFjNjEyZWIgMTAwNjQ0
Ci0tLSBhL3NyYy9hcHAvYXBwLm1vZHVsZS50cworKysgYi9zcmMvYXBwL2FwcC5tb2R1bGUudHMK
QEAgLTc3LDYgKzc3LDggQEAgaWYgKEVOViA9PT0gJ2RldmVsb3BtZW50JykgewogICBDT05ESVRJ
T05BTF9JTVBPUlRTLnB1c2goU3RvcmVNb2R1bGUuZm9yUm9vdChyZWR1Y2VycywgeyBtZXRhUmVk
dWNlcnMgfSkpOwogfQogCitpbXBvcnQgeyBIZXJvRm9ybUNvbXBvbmVudCB9IGZyb20gJy4vaGVy
by1mb3JtLmNvbXBvbmVudCc7CisKIC8qKgogICogYEFwcE1vZHVsZWAgaXMgdGhlIG1haW4gZW50
cnkgcG9pbnQgaW50byBBbmd1bGFyMidzIGJvb3RzdHJhcGluZyBwcm9jZXNzCiAgKi8KQEAgLTg3
LDcgKzg5LDggQEAgaWYgKEVOViA9PT0gJ2RldmVsb3BtZW50JykgewogICAgIEFib3V0Q29tcG9u
ZW50LAogICAgIEhvbWVDb21wb25lbnQsCiAgICAgTm9Db250ZW50Q29tcG9uZW50LAotICAgIFhM
YXJnZURpcmVjdGl2ZQorICAgIFhMYXJnZURpcmVjdGl2ZSwKKyAgICBIZXJvRm9ybUNvbXBvbmVu
dCwKICAgXSwKICAgaW1wb3J0czogWyAvLyBpbXBvcnQgQW5ndWxhcidzIG1vZHVsZXMKICAgICBC
cm93c2VyTW9kdWxlLApkaWZmIC0tZ2l0IGEvc3JjL2FwcC9oZXJvLWZvcm0uY29tcG9uZW50Lmh0
bWwgYi9zcmMvYXBwL2hlcm8tZm9ybS5jb21wb25lbnQuaHRtbApuZXcgZmlsZSBtb2RlIDEwMDY0
NAppbmRleCAwMDAwMDAwLi4wZmM2YjgxCi0tLSAvZGV2L251bGwKKysrIGIvc3JjL2FwcC9oZXJv
LWZvcm0uY29tcG9uZW50Lmh0bWwKQEAgLTAsMCArMSw1OCBAQAorICAgIDxkaXYgY2xhc3M9ImNv
bnRhaW5lciI+CisgICAgICA8ZGl2IFtoaWRkZW5dPSJzdWJtaXR0ZWQiPgorICAgICAgICA8aDE+
SGVybyBGb3JtPC9oMT4KKyAgICAgICAgPGZvcm0gKG5nU3VibWl0KT0ib25TdWJtaXQoKSIgI2hl
cm9Gb3JtPSJuZ0Zvcm0iPgorICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3JvdXAiPgorICAg
ICAgICAgICAgPGxhYmVsIGZvcj0ibmFtZSI+TmFtZTwvbGFiZWw+CisgICAgICAgICAgICA8aW5w
dXQgdHlwZT0idGV4dCIgY2xhc3M9ImZvcm0tY29udHJvbCIgaWQ9Im5hbWUiCisgICAgICAgICAg
ICAgICAgICAgcmVxdWlyZWQKKyAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT0ibW9kZWwu
bmFtZSIgbmFtZT0ibmFtZSIKKyAgICAgICAgICAgICAgICAgICAjbmFtZT0ibmdNb2RlbCI+Cisg
ICAgICAgICAgICA8ZGl2IFtoaWRkZW5dPSJuYW1lLnZhbGlkIHx8IG5hbWUucHJpc3RpbmUiCisg
ICAgICAgICAgICAgICAgIGNsYXNzPSJhbGVydCBhbGVydC1kYW5nZXIiPgorICAgICAgICAgICAg
ICBOYW1lIGlzIHJlcXVpcmVkCisgICAgICAgICAgICA8L2Rpdj4KKyAgICAgICAgICA8L2Rpdj4K
KyAgICAgCisgICAgICAgICAgPGRpdiBjbGFzcz0iZm9ybS1ncm91cCI+CisgICAgICAgICAgICA8
bGFiZWwgZm9yPSJhbHRlckVnbyI+QWx0ZXIgRWdvPC9sYWJlbD4KKyAgICAgICAgICAgIDxpbnB1
dCB0eXBlPSJ0ZXh0IiBjbGFzcz0iZm9ybS1jb250cm9sIiBpZD0iYWx0ZXJFZ28iCisgICAgICAg
ICAgICAgICAgICAgWyhuZ01vZGVsKV09Im1vZGVsLmFsdGVyRWdvIiBuYW1lPSJhbHRlckVnbyI+
CisgICAgICAgICAgPC9kaXY+CisgICAgIAorICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3Jv
dXAiPgorICAgICAgICAgICAgPGxhYmVsIGZvcj0icG93ZXIiPkhlcm8gUG93ZXI8L2xhYmVsPgor
ICAgICAgICAgICAgPHNlbGVjdCBjbGFzcz0iZm9ybS1jb250cm9sIiBpZD0icG93ZXIiCisgICAg
ICAgICAgICAgICAgICAgIHJlcXVpcmVkCisgICAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCld
PSJtb2RlbC5wb3dlciIgbmFtZT0icG93ZXIiCisgICAgICAgICAgICAgICAgICAgICNwb3dlcj0i
bmdNb2RlbCI+CisgICAgICAgICAgICAgIDxvcHRpb24gKm5nRm9yPSJsZXQgcG93IG9mIHBvd2Vy
cyIgW3ZhbHVlXT0icG93Ij57e3Bvd319PC9vcHRpb24+CisgICAgICAgICAgICA8L3NlbGVjdD4K
KyAgICAgICAgICAgIDxkaXYgW2hpZGRlbl09InBvd2VyLnZhbGlkIHx8IHBvd2VyLnByaXN0aW5l
IiBjbGFzcz0iYWxlcnQgYWxlcnQtZGFuZ2VyIj4KKyAgICAgICAgICAgICAgUG93ZXIgaXMgcmVx
dWlyZWQKKyAgICAgICAgICAgIDwvZGl2PgorICAgICAgICAgIDwvZGl2PgorICAgICAKKyAgICAg
ICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyIgW2Rpc2Fi
bGVkXT0iIWhlcm9Gb3JtLmZvcm0udmFsaWQiPlN1Ym1pdDwvYnV0dG9uPgorICAgICAgICAgIDxi
dXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1kZWZhdWx0IiAoY2xpY2spPSJuZXdI
ZXJvKCk7IGhlcm9Gb3JtLnJlc2V0KCkiPk5ldyBIZXJvPC9idXR0b24+CisgICAgICAgIDwvZm9y
bT4KKyAgICAgIDwvZGl2PgorICAgICAKKyAgICAgIDxkaXYgW2hpZGRlbl09IiFzdWJtaXR0ZWQi
PgorICAgICAgICA8aDI+WW91IHN1Ym1pdHRlZCB0aGUgZm9sbG93aW5nOjwvaDI+CisgICAgICAg
IDxkaXYgY2xhc3M9InJvdyI+CisgICAgICAgICAgPGRpdiBjbGFzcz0iY29sLXhzLTMiPk5hbWU8
L2Rpdj4KKyAgICAgICAgICA8ZGl2IGNsYXNzPSJjb2wteHMtOSAgcHVsbC1sZWZ0Ij57eyBtb2Rl
bC5uYW1lIH19PC9kaXY+CisgICAgICAgIDwvZGl2PgorICAgICAgICA8ZGl2IGNsYXNzPSJyb3ci
PgorICAgICAgICAgIDxkaXYgY2xhc3M9ImNvbC14cy0zIj5BbHRlciBFZ288L2Rpdj4KKyAgICAg
ICAgICA8ZGl2IGNsYXNzPSJjb2wteHMtOSBwdWxsLWxlZnQiPnt7IG1vZGVsLmFsdGVyRWdvIH19
PC9kaXY+CisgICAgICAgIDwvZGl2PgorICAgICAgICA8ZGl2IGNsYXNzPSJyb3ciPgorICAgICAg
ICAgIDxkaXYgY2xhc3M9ImNvbC14cy0zIj5Qb3dlcjwvZGl2PgorICAgICAgICAgIDxkaXYgY2xh
c3M9ImNvbC14cy05IHB1bGwtbGVmdCI+e3sgbW9kZWwucG93ZXIgfX08L2Rpdj4KKyAgICAgICAg
PC9kaXY+CisgICAgICAgIDxicj4KKyAgICAgICAgPGJ1dHRvbiBjbGFzcz0iYnRuIGJ0bi1wcmlt
YXJ5IiAoY2xpY2spPSJzdWJtaXR0ZWQ9ZmFsc2UiPkVkaXQ8L2J1dHRvbj4KKyAgICAgIDwvZGl2
PgorICAgIDwvZGl2PgpcIE5vIG5ld2xpbmUgYXQgZW5kIG9mIGZpbGUKZGlmZiAtLWdpdCBhL3Ny
Yy9hcHAvaGVyby1mb3JtLmNvbXBvbmVudC50cyBiL3NyYy9hcHAvaGVyby1mb3JtLmNvbXBvbmVu
dC50cwpuZXcgZmlsZSBtb2RlIDEwMDY0NAppbmRleCAwMDAwMDAwLi45MjY1ZmI5Ci0tLSAvZGV2
L251bGwKKysrIGIvc3JjL2FwcC9oZXJvLWZvcm0uY29tcG9uZW50LnRzCkBAIC0wLDAgKzEsMjEg
QEAKK2ltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnOworCitpbXBvcnQg
eyBIZXJvIH0gZnJvbSAnLi9oZXJvJzsKKworQENvbXBvbmVudCh7CisJc2VsZWN0b3I6ICdhcHAt
aGVyby1mb3JtJywKKwl0ZW1wbGF0ZVVybDogJy4vaGVyby1mb3JtLmNvbXBvbmVudC5odG1sJwor
fSkKK2V4cG9ydCBjbGFzcyBIZXJvRm9ybUNvbXBvbmVudCB7CisKKwlwdWJsaWMgcG93ZXJzID0g
WydSZWFsbHkgU21hcnQnLCAnU3VwZXIgRmxleGlibGUnLCAnU3VwZXIgSG90JywgJ1dlYXRoZXIg
Q2hhbmdlciddOworCXB1YmxpYyBtb2RlbCA9IG5ldyBIZXJvKDE4LCAnRHIgSVEnLCB0aGlzLnBv
d2Vyc1swXSwgJ0NodWNrIE92ZXJzdHJlZXQnKTsKKworCXB1YmxpYyBzdWJtaXR0ZWQgPSBmYWxz
ZTsKKworCXB1YmxpYyBvblN1Ym1pdCgpIHsgdGhpcy5zdWJtaXR0ZWQgPSB0cnVlOyB9CisKKwlw
dWJsaWMgbmV3SGVybygpIHsKKwkJdGhpcy5tb2RlbCA9IG5ldyBIZXJvKDQyLCAnJywgJycpOwor
CX0KK30KZGlmZiAtLWdpdCBhL3NyYy9hcHAvaGVyby50cyBiL3NyYy9hcHAvaGVyby50cwpuZXcg
ZmlsZSBtb2RlIDEwMDY0NAppbmRleCAwMDAwMDAwLi4xNzQ5YzkyCi0tLSAvZGV2L251bGwKKysr
IGIvc3JjL2FwcC9oZXJvLnRzCkBAIC0wLDAgKzEsOSBAQAorZXhwb3J0IGNsYXNzIEhlcm8gewor
CWNvbnN0cnVjdG9yKAorCQlwdWJsaWMgaWQ6IG51bWJlciwKKwkJcHVibGljIG5hbWU6IHN0cmlu
ZywKKwkJcHVibGljIHBvd2VyOiBzdHJpbmcsCisJCXB1YmxpYyBhbHRlckVnbz86IHN0cmluZwor
CSkgeworCX0KK30KLS0gCjIuMTMuNgoK

GowthamAnbu pushed a commit to GowthamAnbu/resource-management-system that referenced this issue Dec 13, 2017
@prasannawagh
Copy link

I'm facing the similar issue. It appears that plugin only recognizes variables declared directly in the class but not the ones nested under formGroup or formBuilder.
This component code gives error Squigglies in HTML for the two FromControl fields-

export class MyDetailComponent implements OnInit {
  myForm: FormGroup;
  constructor() { }
  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl({ value: '', disabled: true }),
      gender: new FormControl({ value: '', disabled: true })
    });
  }
}

this on the other hand does not give the error squigglies as i have declared FormControl in class directly(this is not a solution unfortunately because angular does not allow formcontrol declaration outside of the formgroup)-

export class MyDetailComponent implements OnInit {
  myForm: FormGroup;
  name: FormControl;
  gender: FormControl;
  constructor() { }
  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl({ value: '', disabled: true }),
      gender: new FormControl({ value: '', disabled: true })
    });
  }
}

@guhyeon
Copy link

guhyeon commented Feb 16, 2018

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

image

@kyliau
Copy link
Contributor

kyliau commented Feb 27, 2018

@hlovdal I tried your repro steps, but I could not produce the error. It seems to work fine.
I tested using VS Code Linux v1.20.1, Typescript 2.6.2, Angular.ng-template v0.1.9
Can you please confirm if the issue still exists in Angular.ng-template v0.1.9?

@ShimiTheFirst
Copy link

ShimiTheFirst commented Mar 16, 2018

@kyliau I ran into this issue today with VS Code v1.21.1 on Windows, Typescript 2.3.4 and Angular.ng-template v0.1.9. Here is how I create the form:

this.form = formBuilder.group({
      amount: ["", Validators.compose([Validators.required, SomeCustomValidator.isValid])],
      sale: [{ value: "0" }],
      amountTotal: [""],
      price: [{ value: "123" }, Validators.compose([Validators.required, SomeCustomValidator.isValid])],
      discount: [{ value: "0" }, SomeCustomValidator.isValid],
      priceAfterDiscount: [""],
      sum: [""],
      sumDph: [""]
 });

and in the template I try to reach for it like this:

<ion-item [class.invalid]="!buyForm.controls.amount.valid && (buyForm.controls.amount.dirty || submitAttempt)">

getting this error:

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

When negated, it does not throw the error (meaning that only buyForm.controls.amount.dirty is underlined, not the !buyForm.controls.amount.valid part). That is why the solution given above (with double negation) works.

@grahamhindle
Copy link

I have been searching for a workaround to this for ages - thanks

@rubenheymans
Copy link

@guhyeon thanks but can you explain what this does?

@guhyeon
Copy link

guhyeon commented Jun 26, 2018

@rubenheymans
Well ... I don't know that much.
I think it's a type script compiler problem.
It's an expedient that I've learned by accident.

@lenard-bernardo
Copy link

I've tried using this workaround instead, which also stops the vscode Angular Language Service from complaining:

password.hasError('required') using Validators.required validator on password FormControl

AbstractControl.hasError() requires an errorCode value which I had gotten from by displaying the AbstractControl.errors property to the screen for debugging

{{password.errors | json}}, resulting in: { "required": true }

Further typings could probably be available for known errorCodes, as well as custom validators

@ajaysake1992
Copy link

image

I am also getting the same issue with typescript compiler.

@vsDizzy
Copy link

vsDizzy commented Aug 22, 2018

image
image
Same as @ajaysake1992

@thw0rted
Copy link

I think under the hood this is the same issue as #149 -- referencing an object with an index-signature by index (control?.errors['required']) works but referencing with dot-notation (control?.errors.required) is erroneously flagged as incorrect.

@Jeklah
Copy link

Jeklah commented Mar 4, 2019

I got this today with a simple <input [(ngModel)]="search"> where 'search' was undefined and was giving me red squiggles.
App compiled and worked as intended (to my frustration after spending half the day trying to solve the squiggly before running it...)
Sounds like a vscode bug to me?

@karocksjoelee
Copy link

Here's mine work around solution if you don't like the "!!" on html.

your.component.ts :

get emailFormControl(): any {
return this.formGroupName.get('email');
}

your.component.html :

<mat-error *ngIf="emailFormControl.errors?.required">Please Enter a valid email.

This solution works for me, without giving any compile error / runtime error .

@Ficcion
Copy link

Ficcion commented May 11, 2019

Esto me funcionó:
En la línea donde marca el error, hice un espacio con la barra espaciadora antes del cierre de la etiqueta ( >) y el error desapareció.
Borré el espacio creado y quedó todo normal, sin errores.

@UrmaGurd
Copy link

UrmaGurd commented Jun 4, 2019

Also experiencing exactly the same problem. FormGroup controls created in FormBuilder are not known the VSCode's intellisense for the view template. Any idea if there is an actual fix possible for this, rather than the !! workaround

@ajaysake1992
Copy link

You can use square bracket instead of dot operator to access the property name. This could fix your compilation error.
Example - *ngIf="price.errors[required]"

@BenRacicot
Copy link

Wow, brackets does solve the red. I can confirm that this is sporatic.
I'm using Angular: 7.2.15, typescript: 3.1.6 and VSC 1.35.1.
Screen Shot 2019-06-29 at 10 28 28 AM

@appleseedexm
Copy link

appleseedexm commented Aug 6, 2019

This is still happening with Angular 8.1.3, with both custom and built-in forms validators (e.g. required). Would be awesome if the registered validators would be clear for intellisense. Running VSC 1.36.1.

Workaround: use bracket annotation instead of dot-annotation, or use !!formcontrol.errors.required

The workaround makes me think if intellisense might mark it due to it's undefined value? Since the errors object is not a set of true/false flags but defined by existence of said flags (which is IMO an unusual pattern), I could imagine intellisense having issues with that.

@andrius-pra
Copy link
Collaborator

@ivanwonder have already created PR for this issue. So let's wait until they merge it.

@karan-kang
Copy link

Workaround:

Instead of:

formGroup.errors?.customValidator

use:

formGroup.errors && formGroup.errors['customValidator']

@obsidian33
Copy link

I'm glad there is a workaround... but has any progress been made while investigating the issue?
I'm sure many of us prefer the simple dot notation.

This issue still exists on v0.802.3

ayazhafiz added a commit to ayazhafiz/angular that referenced this issue Nov 17, 2019
Commit 53fc2ed added support for
determining index types accessed using index signatures, but did not
include support for index types accessed using dot notation:

```typescript
const obj<T>: { [key: string]: T };
obj['stringKey']. // gets `T.` completions
obj.stringKey.    // did not peviously get `T.` completions
```

This adds support for determining an index type accessed via dot
notation by rigging an object's symbol table to return the string index
signature type a property access refers to, if that property does not
explicitly exist on the object. This is very similar to @ivanwonder's
work in angular#29811.

`SymbolWrapper` now takes an additional parameter to explicitly set the
type of the symbol wrapped. This is done because
`SymbolTableWrapper#get` only has access to the symbol of the index
type, _not_ the index signature symbol itself. An attempt to get the
type of the index type will give an error.

Closes angular#29811
Closes angular/vscode-ng-language-service#126
@kyliau kyliau changed the title Form Group angular identifier '' is not defined. '__type' does not contain... Support indexed types Nov 25, 2019
ayazhafiz added a commit to ayazhafiz/angular that referenced this issue Nov 26, 2019
Commit 53fc2ed added support for
determining index types accessed using index signatures, but did not
include support for index types accessed using dot notation:

```typescript
const obj<T>: { [key: string]: T };
obj['stringKey']. // gets `T.` completions
obj.stringKey.    // did not peviously get `T.` completions
```

This adds support for determining an index type accessed via dot
notation by rigging an object's symbol table to return the string index
signature type a property access refers to, if that property does not
explicitly exist on the object. This is very similar to @ivanwonder's
work in angular#29811.

`SymbolWrapper` now takes an additional parameter to explicitly set the
type of the symbol wrapped. This is done because
`SymbolTableWrapper#get` only has access to the symbol of the index
type, _not_ the index signature symbol itself. An attempt to get the
type of the index type will give an error.

Closes angular#29811
Closes angular/vscode-ng-language-service#126
mhevery pushed a commit to angular/angular that referenced this issue Nov 27, 2019
…ion (#33884)

Commit 53fc2ed added support for
determining index types accessed using index signatures, but did not
include support for index types accessed using dot notation:

```typescript
const obj<T>: { [key: string]: T };
obj['stringKey']. // gets `T.` completions
obj.stringKey.    // did not peviously get `T.` completions
```

This adds support for determining an index type accessed via dot
notation by rigging an object's symbol table to return the string index
signature type a property access refers to, if that property does not
explicitly exist on the object. This is very similar to @ivanwonder's
work in #29811.

`SymbolWrapper` now takes an additional parameter to explicitly set the
type of the symbol wrapped. This is done because
`SymbolTableWrapper#get` only has access to the symbol of the index
type, _not_ the index signature symbol itself. An attempt to get the
type of the index type will give an error.

Closes #29811
Closes angular/vscode-ng-language-service#126

PR Close #33884
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 18, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.