Vscode-ng-language-service: Unterstützt optionale Verkettung in der Vorlage

Ich habe das gleiche Problem, aber keine der vorgeschlagenen Lösungen hat funktioniert:
"form? .get ('name'). error.required"
"Formular? .get ('Name'). Fehler. ['Erforderlich']"
"Formular? .get ('Name'). Fehler? .erforderlich"

Hallo, versuche es so.
Form.hasError ('erforderlich');

Das hat bei mir funktioniert. Danke @antonheck

Es gibt ein paar Problemumgehungen, jede besser für unterschiedliche Situationen, ja. Aber das ist nicht das Problem. Ich sollte meinen Code nicht anders schreiben müssen, einschließlich hässlicher, hackiger Sintaxe, nur um eine IDE-Erweiterung zu beschwichtigen, wenn das, was ich geschrieben habe, von Anfang an richtig war.

Ich habe genau das gleiche Problem und die gleiche Meldung mit diesem ähnlichen Code:

class MyComponent {
  form: FormGroup;
}

mit Zeilen wie diesen in der Vorlage:

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

Fehlermeldung :

Die Kennung 'E-Mail' ist nicht definiert. '__type' enthält kein solches Mitglied

Das Problem wird durch Felder vom Typ verursacht (es tritt natürlich bei AbstractControl oder etwas anderem auf):

{  [key: string]: AbstractControl;  };

Ich habe diese Nachricht in Visual Studio Code (Windows) und Angular Language Services, aber nicht mit ng lint .

Beste Lösung bisher:

Versuchen Sie, "!!" voranzustellen.
Obwohl es schwierig ist,
Das ist mir gelungen.

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

Danke tmrony, beste Lösung nach vielen Tagen Suche ...

Eigentlich soll es so sein, das Fehler-Highlight wird angezeigt, weil die "Fehler" -Eigenschaft von "AbstractControl" keine streng definierten Eigenschaften hat, sondern vom Typ " ValidationErrors " ist.

Der direkte Zugriff auf eine Validierungsregel führt also zu dem Fehler. In meinem Fall wird das Problem durch den Zugriff mit der eckigen Klammer behoben.

(Übrigens, selbst wenn ich direkt auf die Validierungseigenschaft zugreife, erhalte ich keine Kompilierungsfehler, funktioniert die App in beiden Fällen einwandfrei.)

Die andere Möglichkeit besteht darin, die "hasError" -Methode des Steuerelements zu verwenden:

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

@ boban984 Lösung funktioniert ....

@adickenscheidt Lösung hat bei mir funktioniert! Vielen Dank

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

"Preis? Fehler? Erforderlich" sollte auch funktionieren, da mein "vollständiger Name? Fehler? Erforderlich" funktioniert

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

Das löst nicht aus, dass der Compiler "Bezeichner ist nicht definiert" ist, aber es ist keine gute Lösung, denn wenn das Fehlerobjekt null ist, wird es in der Konsole einen Fehler verursachen.

@ boban984
Dies ist die Gewinnerlösung und Erklärung.

Ich war froh, die hier diskutierte hasError() -Methode zu finden. Es ist sicherlich der klarste Weg, die Absicht der Vorlage unter bestimmten Bedingungen zu zeigen, und ich denke, ich werde versuchen, sie in Zukunft ausschließlich zu verwenden.

Jedoch ... niemand spricht die Grundursache des Problems an, und es ist seit ungefähr einem Jahr ein Problem mit dem Sprachdienst. Die errors -Eigenschaft hat eine Schlüsselindexsignatur ( [key: string]: any ), was bedeutet, dass im TS-Code die Anweisung myControl.errors.anythingYouLike sauber kompiliert wird, unabhängig davon, welche Strict-Mode-Flags Sie gesetzt haben . Dies ist richtig, da der Sinn einer solchen Indexsignatur darin besteht, zur Laufzeit beliebige Eigenschaften erstellen und entweder durch Punktnotation oder Indexnotation darauf zugreifen zu können. Der Sprachdienst ermöglicht die Indexnotation, weshalb control?.errors['required'] funktioniert, kennzeichnet jedoch die Punktnotation als falsch, was ein Fehler ist.

drei Lösungen:

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

Ich mag das drittbeste

@ boban984 Tolle Lösung und Erklärung

Danke, arbeitet für mich!. 👍🏼
Ich hasse es, Fehler auf der Konsole anzuzeigen 😬

Hallo, versuche es so.
Form.hasError ('erforderlich');

Dies war die eleganteste Lösung und funktioniert wirklich in allen Fällen: myForm.hasError ('erforderlich', 'myField').

Danke @antonheck

Hallo, versuche es so.
Form.hasError ('erforderlich');

Dies war die eleganteste Lösung und funktioniert wirklich in allen Fällen: myForm.hasError ('erforderlich', 'myField').

Es funktioniert, aber die beste Lösung, die auf Einfachheit basiert, wurde von @ boban984 angeboten : "myField.hasError ('erforderlich')". :) :)

Ich habe dieses Problem folgendermaßen gelöst:

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

Ich hoffe hilfreich zu sein.

Perfektes @bePericon das funktioniert bei mir!
Vielen Dank!

<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>
Dies hat bei mir in Angular 7 funktioniert

Also nach zwei Jahren wurde es nicht behoben? 🤣
Verwandte: https://github.com/angular/vscode-ng-language-service/issues/110

Also nach zwei Jahren wurde es nicht behoben? 🤣
verwandt: # 110

Es ist kein Fehler, es ist genau so, wie es funktionieren sollte

Kann die Dokumentation aktualisiert werden, wenn dies erwartete Funktionalität ist? (siehe hier für ein Beispiel).

Dies lässt eindeutig darauf schließen, dass die Raw-Property-Accessoren von ngModel verwendet werden können, wenn dieser Thread festgestellt hat, dass dies definitiv nicht möglich ist.

Ist es eigentlich behoben? Ich habe vor langer Zeit zu hasError gewechselt, aber jetzt versuche ich, den Fehler zu reproduzieren. myControl.errors.maxlength erzeugt für mich kein rotes Schnörkel. Dies ist mit der Sprachdiensterweiterung 0.801.1 möglich, die v8.1.x der Bibliothek verwendet, sofern dies hilfreich ist.

@ thw0rted also, beim myControl.errors.required und .pattern und (festgestellt, dass ich das Attribut required auf dem Eingabe-Tag verpasst habe, was einen größeren Fehler verursacht hat), tun sie dies nicht ziemlich arbeiten.

Required funktioniert meistens, obwohl einige seltsame Fehler aufgetreten sind (sie wurden nicht erfasst und sind leider inkonsistent), und pattern ausgelöst, wenn das Muster falsch ist, aber nicht aktualisiert zu werden scheint wenn das Muster korrekt ist.

Außerdem habe ich die gleiche vsCode-Spracherweiterung und sehe immer noch seltsamerweise Kringel.

Ich werde mich im Moment an die .hasError -Lösung halten und würde wahrscheinlich immer noch empfehlen, die Dokumente zu aktualisieren, zumindest um dies als klarere / bewährte Methode zu verwenden.

Ich habe festgestellt, dass dieser Fehler jedes Mal auftritt, wenn Sie auf eine Eigenschaft verweisen, die als "any" definiert ist. Eine andere Problemumgehung ist die Verwendung der Annotation der Klammer-Eigenschaft clientFirstName? .Ferrors ['erforderlich'], was ebenfalls ziemlich dumm ist.

Dies beseitigte die Fehler für mich. Als Referenz funktionierte der Code auch dann, wenn die Fehler umrissen wurden. Ich mag es einfach nicht, rote Linien in meinem Code zu sehen.

Ja, wenn Sie den Schlüssel als Zeichenfolge eingeben, werden die roten Linien entfernt.

Aber Sie verlieren damit Funktionen wie korrekte Rechtschreibung und automatische Vervollständigung.

Zusätzlich zur Verwendung von hasError () sollte für den Zugriff auf das untergeordnete Steuerelement eines Formulars get () anstelle des Punktzugriffs verwendet werden. z.B

class MyComponent {
  form: FormGroup;
}

mit Zeilen wie diesen in der Vorlage:

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

Fehlermeldung :

Die Kennung 'E-Mail' ist nicht definiert. '__type' enthält kein solches Mitglied

Lösung wäre:

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

Gleicher Fehler.

f.email.errors.email.required schlägt fehl
!! f.email.errors.email.required schlägt fehl
f.email?.errors.email.required schlägt fehl
f? .email? .errors.email.required schlägt fehl
f.email.error. ['erforderlich'] schlägt fehl
f.email?.error.['required '] schlägt fehl

Das hat bei mir funktioniert:

f ['email']. error.required

Sollte mit https://github.com/angular/angular/pull/33884 behoben werden

Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.

Lesen Sie mehr über unsere Richtlinien zum automatischen Sperren von Konversationen .

_{_Diese Aktion wurde automatisch von einem Bot ausgeführt._}