Vscode-ng-language-service: Prise en charge du chaînage facultatif dans le modèle

J'ai le même problème, mais aucune des solutions proposées n'a fonctionné:
"formulaire? .get ('nom'). errors.required"
"formulaire? .get ('nom'). erreurs. ['obligatoire']"
"formulaire? .get ('nom'). erreurs? .requis"

Bonjour, essayez-le comme ça.
Form.hasError ('obligatoire');

Cela a fonctionné pour moi. Merci @antonheck

il existe quelques solutions de contournement, chacune meilleure pour une situation différente, oui. Mais ce n’est pas le problème. Je ne devrais pas avoir à écrire mon code différemment, y compris la vilaine sintaxe hacky, uniquement pour apaiser une extension IDE, alors que ce que j'ai écrit était juste depuis le début.

J'ai exactement le même problème et le même message avec ce code similaire:

class MyComponent {
  form: FormGroup;
}

avec des lignes comme celle-ci dans le modèle:

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

Message d'erreur :

L'identifiant «email» n'est pas défini. '__type' ne contient pas un tel membre

Le problème est causé par des champs de type comme (cela se produit avec AbstractControl ou autre chose bien sûr):

{  [key: string]: AbstractControl;  };

J'ai ce message dans Visual Studio Code (Windows) et Angular Language Services, mais pas avec ng lint .

Meilleure solution à ce jour:

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

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

Merci tmrony, meilleure solution après plusieurs jours de recherche ...

En fait, c'est censé être comme ça, la surbrillance d'erreur est affichée car la propriété "errors" de "AbstractControl" n'a pas de propriétés strictement définies, elle est de type " ValidationErrors "

Donc, accéder directement à une règle de validation provoque l'erreur, dans mon cas, y accéder en utilisant la notation entre crochets résout le problème.

(btw même si j'accède directement à la propriété de validation, je ne reçois pas d'erreurs de compilation, l'application fonctionne bien de toute façon)

L'autre façon de faire cela est d'utiliser la méthode "hasError" du contrôle:

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

@ boban984 La solution a fonctionné ....

@adickenscheidt Solution a fonctionné pour moi! Merci

"price.errors ['required']" -> A travaillé
"!! price.errors.required" -> A travaillé

"price? .errors? .required" devrait également fonctionner, car mon "fullname? .errors? .required" fonctionne

"price.errors ['required']" -> A travaillé

Cela ne déclenche pas le compilateur 'L'identificateur n'est pas défini' mais ce n'est pas une bonne solution, car si l'objet erreurs est nul, il provoquera une erreur sur la console à ce sujet.

@ boban984
c'est la solution et l'explication gagnantes.

J'étais heureux de trouver la méthode hasError() discutée ici, c'est certainement le moyen le plus clair de montrer l'intention du modèle conditionnel et je pense que je vais essayer de l'utiliser exclusivement à l'avenir.

Cependant ... personne ne s'attaque à la cause profonde du problème, et c'est un problème avec le service linguistique depuis environ un an maintenant. La propriété errors a une signature d'index clé ( [key: string]: any ) ce qui signifie que dans le code TS, l'instruction myControl.errors.anythingYouLike se compilera proprement, quels que soient les indicateurs de mode strict que vous avez définis . Ceci est correct, car l'intérêt d'avoir une signature d'index comme celle-ci est de pouvoir créer des propriétés arbitraires au moment de l'exécution et d'y accéder par notation par points ou par notation d'index. Le service de langage autorise la notation d'index, c'est pourquoi control?.errors['required'] fonctionne, mais marque la notation par points comme incorrecte, ce qui est une erreur.

trois 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>

J'aime le troisième meilleur

@ boban984 Excellente solution et explication

thnks, fonctionne pour moi !. 👍🏼
Je déteste afficher les erreurs sur la console 😬

Bonjour, essayez-le comme ça.
Form.hasError ('obligatoire');

C'était la solution la plus élégante, et fonctionne vraiment dans tous les cas: myForm.hasError ('required', 'myField').

Merci @antonheck

Bonjour, essayez-le comme ça.
Form.hasError ('obligatoire');

C'était la solution la plus élégante, et fonctionne vraiment dans tous les cas: myForm.hasError ('required', 'myField').

Cela fonctionne, mais la meilleure solution basée sur la simplicité a été proposée par @ boban984 : "myField.hasError ('required')". :)

J'ai résolu ce problème de cette manière:

• 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>

J'espère être utile.

Parfait @bePericon cela fonctionne pour moi!
Merci!

<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>
Cela a fonctionné pour moi dans Angular 7

Donc après deux ans, ça n'a pas été corrigé? 🤣
en relation: https://github.com/angular/vscode-ng-language-service/issues/110

Donc après deux ans, ça n'a pas été corrigé? 🤣
en relation: # 110

Ce n'est pas un bug, c'est exactement comme ça que ça devrait fonctionner

Si cette fonctionnalité est attendue, la documentation peut-elle être mise à jour? (voir ici pour un exemple).

Cela signifie clairement que les accesseurs de propriété bruts de ngModel peuvent être utilisés, là où ce thread a établi qu'ils ne peuvent certainement pas.

En fait, est-ce corrigé? Je suis passé à hasError il y a longtemps, mais maintenant j'essaye et j'échoue à reproduire l'erreur. myControl.errors.maxlength ne génère pas de squiggly rouge pour moi. C'est avec l'extension de service de langue 0.801.1, qui utilise la v8.1.x de la bibliothèque, si cela vous aide.

@ thw0rted ainsi, lors du retest avec myControl.errors.required et .pattern et (réalisé que j'ai manqué l'attribut required sur la balise d'entrée, ce qui causait un échec plus important), ils ne assez de travail.

Required fonctionne principalement, bien qu'il y ait eu des erreurs étranges qui se sont produites (vous avez manqué de les capturer et elles sont malheureusement incohérentes), et pattern déclenche lorsque le modèle est incorrect mais ne semble pas se mettre à jour lorsque le motif est correct.

De plus, j'ai la même extension de langage vsCode, et je vois toujours des squigglies étrangement.

Je vais rester avec la solution .hasError pour le moment, et je recommanderais probablement toujours la mise à jour de la documentation, au moins pour une utilisation plus claire / meilleure.

J'ai trouvé que cette erreur apparaît chaque fois que vous faites référence à une propriété définie comme «any». Une autre solution de contournement consiste à utiliser l'annotation de propriété de crochet, clientFirstName? .Errors ['required'] qui est également assez stupide.

Cela a supprimé les erreurs pour moi. Pour référence, le code fonctionnait même lorsque les erreurs étaient décrites, je n'aime tout simplement pas voir des lignes rouges dans mon code.

Oui, mettre la clé sous forme de chaîne supprime les lignes rouges.

Mais vous perdez des fonctionnalités telles que l'orthographe correcte et l'auto-complétion avec cela.

en plus d'utiliser hasError (), l'accès au contrôle enfant d'un formulaire doit utiliser get () plutôt que l'accès point. par exemple

class MyComponent {
  form: FormGroup;
}

avec des lignes comme celle-ci dans le modèle:

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

Message d'erreur :

L'identifiant «email» n'est pas défini. '__type' ne contient pas un tel membre

la solution serait:

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

Même problème.

f.email.errors.email.required échoue
!! f.email.errors.email.required échoue
f.email?.errors.email.required échoue
f? .email? .errors.email.required échoue
f.email.error. ['required'] Échec
f.email?.error.['required '] Échec

Cela a fonctionné pour moi:

f ['email']. errors.required

Doit être corrigé avec https://github.com/angular/angular/pull/33884.

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