Vscode-ng-language-service: Prise en charge des types indexés

Créé le 7 juil. 2017  ·  32Commentaires  ·  Source: angular/vscode-ng-language-service

Lorsque vous utilisez des formulaires réactifs, dans le modèle HTML, j'obtiens l'erreur dans le titre.


Merci d'entrer un nom valide.


Les deux "formRegister.controls.company.invalid && formRegister.controls.company.touched" sont soulignés comme une erreur mais l'application fonctionne très bien.

bug

Commentaire le plus utile

Je rencontre également ce problème avec les formulaires réactifs.

Une solution temporaire consiste à accéder à la propriété à l'aide d'une expression d'accesseur de propriété entre crochets.

formRegister.controls['company'].invalid

Tous les 32 commentaires

@ virgil-av Pouvez-vous créer un référentiel qui reproduit ce problème?

Nous avons le même problème avec le type de syndicat. Comme

public Hour: TimeSpan | chaîne de caractères;

Erreur:
L'identifiant 'hhMM' n'est pas défini. ''ne contient pas un tel membre

hhMM est un membre valide dans TimeSpan mais il semble que Hour soit traité comme un any; (

@wupaz Votre exemple est attendu car la chaîne n'a pas de hhMM tant que membre et un type d'union n'a que les membres que les types constituants ont en commun.

TypeScript signale une erreur similaire

Je rencontre également ce problème avec les formulaires réactifs.

Une solution temporaire consiste à accéder à la propriété à l'aide d'une expression d'accesseur de propriété entre crochets.

formRegister.controls['company'].invalid

Aussi obtenir cela en fait. Je crois que cela était également un problème dans TS, mais semble fonctionner maintenant pour moi. Au moins dans TS 2.4.0 et Angular 4.3.0:

Voici la définition de type pour la propriété FormGroup.controls: https://github.com/angular/angular/blob/master/packages/forms/src/model.ts#L832

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

Ceux-ci fonctionnent tous les deux en TS pour moi, mais la notation par points se plaint dans le service de langue:

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

@intellix Même chose ici

Idem dans v2.5.2 .

j'ai le même problème dans tsc v2.5.2 que des amis l'ont dit

Pouvez-vous créer un référentiel qui reproduit ce problème?

@chuckjaz Je peux créer quelque chose de mieux: pas de référentiel.

Parce que j'ai testé et trouvé que ce problème n'est pas du tout lié au code source ou aux packages npm. J'ai commencé à avoir ce problème, puis j'ai testé la connexion en tant qu'utilisateur différent, en démarrant le code de Visual Studio dans le même répertoire, puis je n'ai pas eu l'erreur dans cet éditeur.

error_screenshot

Cela est également cohérent avec le fait que l'erreur n'apparaît que dans l'éditeur et le compilateur ne se plaint pas lors de la construction.

Donc, évidemment, une différence par utilisateur. Ensuite, j'ai testé la suppression du répertoire de configuration et le problème a disparu. Lorsque vous déplacez à nouveau l'ancien répertoire, le problème réapparaît.

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

Donc, un certain cruft est entré dans le répertoire de configuration qui déclenche cela (un cache serait à mon avis). Lorsque vous passez la souris sur valid de name.valid juste après le démarrage de l'éditeur, une info-bulle de "Chargement ..." s'affiche pendant plusieurs secondes avant de disparaître et l'erreur se produit. La deuxième fois et plus tard, l'erreur s'affiche tout de suite lors du survol.

J'ai retracé la différence entre les utilisateurs, et c'est le versement de l'extension vscode Angular.ng-template version 0.1.7. Et je peux maintenant également fournir un référentiel qui reproduit ce problème:

  1. Cloner https://github.com/colinskow/angular-electron-dream-starter
  2. Appliquez le patch ci-joint.
  3. Ouvrez src / app / hero-form.component.html.
  4. a) Avec Angular.ng-template installé, name.valid et quatre autres identificateurs recevront un soulignement rouge (et des erreurs d'info-bulle [Angular] Identifier 'valid' is not defined. 'NgModel' does not contain such a member ).
    b) Avec Angular.ng-template non installé ou désactivé, aucune erreur ne se produit.

Le patch est relatif à v7.0.0 , mais je l'ai également testé avec le commit bd5ad5f0 (Feature / ng2 rc5 (# 875)) du 21/08/2016 qui est le premier commit à contenir src / app / app.module .ts, et l'erreur s'est produite là aussi, donc je suppose que c'est un problème pour toutes les versions de ce repo.

Étant donné que angular-electron-dream-starter est un fork de https://github.com/AngularClass/angular-starter , j'ai également testé le correctif dans ce repo, et là, le problème ne se produit pas mais l'info-bulle contient des informations valides :

no error

Initialement testé sur vscode version 1.17.2 (commit b813d129). Après la mise à jour vers la version 1.8.0 (commit dcee22027), le résultat est le même.


En raison de la gestion des pièces jointes complètement stupide de Github, le patch est encodé en base64 ici:

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
par1mb3JtLmNvbXBvbmVudCc7CisKIC8qKgogICogYEFwcE1vZHVsZWAgaXMgdGhlIG1haW4gZW50
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 + CisgICAgIAorICAgICAgICAgICAgIDxkaXYgY2xhc3M9ImZvcm0tZ3Jv
dXAiPgorICAgICAgICAgICAgPGxhYmVsIGZvcj0icG93ZXIiPkhlcm8gUG93ZXI8L2xhYmVsPgor
ICAgICAgICAgICAgPHNlbGVjdCBjbGFzcz0iZm9ybS1jb250cm9sIiBpZD0icG93ZXIiCisgICAg
ICAgICAgICAgICAgICAgIHJlcXVpcmVkCisgICAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCld
PSJtb2RlbC5wb3dlciIgbmFtZT0icG93ZXIiCisgICAgICAgICAgICAgICAgICAgICNwb3dlcj0i
bmdNb2RlbCI + CisgICAgICAgICAgICAgIDxvcHRpb24gKm5nRm9yPSJsZXQgcG93IG9mIHBvd2Vy
cyIgW3ZhbHVlXT0icG93Ij57e3Bvd319PC9vcHRpb24 + CisgICAgICAgICAgICA8L3NlbGVjdD4K
KyAgICAgICAgICAgIDxkaXYgW2hpZGRlbl09InBvd2VyLnZhbGlkIHx8IHBvd2VyLnByaXN0aW5l
IiBjbGFzcz0iYWxlcnQgYWxlcnQtZGFuZ2VyIj4KKyAgICAgICAgICAgICAgICAgUG93ZXIgaXMgcmVx
dWlyZWQKKyAgICAgICAgICAgIDwvZGl2PgorICAgICAgICAgIDwvZGl2PgorICAgICAKKyAgICAg
ICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgY2xhc3M9ImJ0biBidG4tc3VjY2VzcyIgW2Rpc2Fi
bGVkXT0iIWhlcm9Gb3JtLmZvcm0udmFsaWQiPlN1Ym1pdDwvYnV0dG9uPgorICAgICAgICAgICAgIDxi
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

Je suis confronté au même problème. Il semble que le plugin ne reconnaît que les variables déclarées directement dans la classe mais pas celles imbriquées sous formGroup ou formBuilder.
Ce code de composant donne des Squigglies d'erreur en HTML pour les deux champs FromControl-

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 })
    });
  }
}

cela ne donne pas de gribouillis d'erreur car j'ai déclaré FormControl directement dans la classe (ce n'est malheureusement pas une solution car angular ne permet pas la déclaration formcontrol en dehors du 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 })
    });
  }
}

Essayez de préfixer "!!".
Bien que ce soit délicat,
J'ai réussi de cette façon.

image

@hlovdal J'ai essayé vos étapes de repro, mais je n'ai pas pu produire l'erreur. Cela semble marcher correctement.
J'ai testé avec VS Code Linux v1.20.1, Typescript 2.6.2, Angular.ng-template v0.1.9
Pouvez-vous s'il vous plaît confirmer si le problème existe toujours dans Angular.ng-template v0.1.9?

@kyliau J'ai rencontré ce problème aujourd'hui avec VS Code v1.21.1 sous Windows, Typescript 2.3.4 et Angular.ng-template v0.1.9. Voici comment je crée le formulaire:

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: [""]
 });

et dans le modèle, j'essaye de l'atteindre comme ceci:

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

obtenir cette erreur:

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

Lorsqu'elle est annulée, elle ne renvoie pas l'erreur (ce qui signifie que seul buyForm.controls.amount.dirty est souligné, pas la partie !buyForm.controls.amount.valid ). C'est pourquoi la solution donnée ci-dessus (avec double négation) fonctionne.

Je cherche une solution de contournement à cela depuis des lustres - merci

@guhyeon merci mais pouvez-vous expliquer ce que cela fait?

@rubenheymans
Eh bien ... je ne sais pas grand chose.
Je pense que c'est un problème de compilateur de script de type.
C'est un expédient que j'ai appris par accident.

J'ai essayé d'utiliser cette solution de contournement à la place, ce qui empêche également le service de langage angulaire vscode de se plaindre:

password.hasError('required') utilisant Validators.required validateur sur le mot de passe FormControl

AbstractControl.hasError() nécessite une valeur errorCode que j'avais obtenue en affichant la propriété AbstractControl.errors à l'écran pour le débogage

{{password.errors | json}} , ce qui donne: { "required": true }

D'autres typages pourraient probablement être disponibles pour les codes d'erreur connus, ainsi que pour les validateurs personnalisés

image

J'obtiens également le même problème avec le compilateur dactylographié.

image
image
Identique à @ ajaysake1992

Je pense que sous le capot, c'est le même problème que # 149 - référencer un objet avec une signature d'index par index ( control?.errors['required'] ) fonctionne mais le référencement avec la notation par points ( control?.errors.required ) est erroné signalé comme incorrect.

J'ai eu ça aujourd'hui avec un simple où «recherche» n'était pas défini et me donnait des gribouillis rouges.
L'application compilée et a fonctionné comme prévu (à ma grande frustration après avoir passé la moitié de la journée à essayer de résoudre le squiggly avant de l'exécuter ...)
Cela me semble être un bug de vscode?

Voici ma solution de contournement si vous n'aimez pas le "!!" sur html.

your.component.ts:

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

your.component.html:

Veuillez saisir une adresse e-mail valide.

Cette solution fonctionne pour moi, sans donner aucune erreur de compilation / erreur d'exécution.

Cela a fonctionné pour moi:
Dans la ligne où vous marquez l'erreur, j'ai fait un espace avec la barre d'espace avant la fermeture de la balise (>) et l'erreur a disparu.
J'ai supprimé l'espace créé et tout était normal, sans erreur.

Connaissant également exactement le même problème. Les contrôles FormGroup créés dans FormBuilder ne sont pas connus pour l'intellisense du VSCode pour le modèle de vue. Toute idée s'il y a une solution réelle possible pour cela, plutôt que le !! solution de contournement

Vous pouvez utiliser un crochet au lieu de l'opérateur point pour accéder au nom de la propriété. Cela pourrait corriger votre erreur de compilation.
Exemple - * ngIf = "price.errors [required]"

Wow, les parenthèses résolvent le rouge. Je peux confirmer que c'est sporatique.
J'utilise Angular: 7.2.15 , typescript: 3.1.6 et VSC 1.35.1 .
Screen Shot 2019-06-29 at 10 28 28 AM

Cela se produit toujours avec Angular 8.1.3, avec des validateurs de formulaires personnalisés et intégrés (par exemple requis). Ce serait génial si les validateurs enregistrés étaient clairs pour intellisense. Exécution de VSC 1.36.1.

Solution: utilisez l'annotation entre crochets au lieu de l'annotation par points, ou utilisez !! formcontrol.errors.required

La solution de contournement me fait penser si intellisense pourrait le marquer en raison de sa valeur non définie? Étant donné que l'objet d'erreurs n'est pas un ensemble de drapeaux vrai / faux mais défini par l'existence desdits drapeaux (ce qui est IMO un modèle inhabituel), je pourrais imaginer qu'intellisense ait des problèmes avec cela.

@ivanwonder a déjà créé des relations publiques pour ce numéro. Attendons donc qu'ils le fusionnent.

Solution de contournement:

Au lieu de:

formGroup.errors?.customValidator

utilisation:

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

Je suis content qu'il y ait une solution de contournement ... mais des progrès ont-ils été réalisés lors de l'enquête sur le problème?
Je suis sûr que beaucoup d'entre nous préfèrent la notation simple par points.

Ce problème existe toujours sur la v0.802.3

Ce problème a été automatiquement verrouillé en raison de l'inactivité.
Veuillez signaler un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_Cette action a été effectuée automatiquement par un bot._

Cette page vous a été utile?
0 / 5 - 0 notes