Ich verwende das neueste Angular und das neueste Angular Material. Ich habe einen Datepicker und möchte eine Bestätigung hinzufügen. Dokumente sagen, dass das required -Attribut out of the box funktionieren sollte, aber es scheint Fehler nicht in der gleichen Weise zu behandeln, wie andere Formularelemente.
Hier ist mein Markup:
%Vor% Dies funktioniert auf dem Happy-Pfad. Wenn also ein Datum ausgewählt wird, endet das Datum in der erwarteten Eigenschaft in myService .
Die Validierung funktioniert nicht so, wie ich es erwarten würde; In diesem Fall, wenn ich in das Feld und dann aus dem Feld klicke, ohne ein Datum einzugeben, erhält die Eingabe [controlName].errors -Objekt wird nicht ausgefüllt. Dies bedeutet, dass das Anzeigen einer Fehlermeldung in der üblichen Weise (die Art, die mit anderen Eingaben arbeitet, die keine Datumauswahl auf derselben Seite sind) nicht funktioniert:
Das *ngIf ist niemals wahr, da der Datepicker niemals dob.errors zu aktualisieren scheint. Daher wird die Fehlermeldung nie angezeigt, auch wenn die Eingabe als ungültig formatiert ist.
Stimmt das? Habe ich etwas verpasst?
Ich habe auch versucht, eine benutzerdefinierte Anweisung hinzuzufügen, um zu bestätigen, dass das Datum, das mit dem Datumsauswahl ausgewählt wurde, anzeigt, dass der Benutzer über 18 ist:
%Vor% In diesem Fall versuche ich, eine ähnliche matError (außer Verknüpfung mit dob.errors.validateAdult statt dessen) zu verwenden, um den Fehler gegebenenfalls anzuzeigen.
Das Interessante daran ist, dass wenn ich ein Datum vor weniger als 18 Jahren auswähle, die gesamte Eingabe, das Label usw. den roten Standardfehler-Stil bekommt, also passiert etwas, aber ich sehe meinen Fehler immer noch nicht Nachricht.
Irgendwelche Vorschläge würden sehr geschätzt!
Genaue Versionen:
%Vor% Ich habe es geschafft, das ohne die ErrorStateMatcher funktionieren zu lassen, obwohl das mir geholfen hat, die Lösung zu erreichen. Verlassen Sie hier für zukünftige Referenz oder um anderen zu helfen.
Ich habe mein Formular in eine reaktive Form anstelle einer vorlagengesteuerten Form konvertiert und die benutzerdefinierte Validierer-Direktive in einen einfacheren Validator (nicht-direktivenbasiert) geändert.
Hier ist der Arbeitscode:
my-form.component.html:
%Vor% note : Der obige Code befindet sich in einigen verschachtelten ngFor Schleifen, die den Wert von fieldset und control definieren. In diesem Beispiel wird control der Zeichenkette dob zugeordnet.
über-achtzehn.validator.ts:
%Vor%my-form.component.ts:
%Vor%Ich benutze ErrorStateMatcher in meinen Angular Material Forms, es funktioniert perfekt.
Sie sollten einen Code haben, der so aussieht:
%Vor%Und Typoskript:
%Vor%Sie können hier mehr darüber sehen: Ссылка
Sie haben die # dob dupliziert. Das kann ein unerwünschtes Verhalten bei der Winkelvalidierung haben.
Sie haben
%Vor%und
%Vor%Bitte korrigieren Sie die Namenskonvention und sehen Sie was passiert.
Sie können den Namen der Eingangsreferenz wie folgt ändern .. Beachten Sie, dass das Eingabeelement #dobInput nur im Mat-Fehler referenziert wird.
%Vor%
Der Picker wird mit #dbo
referenziert %Vor%Haben Sie versucht, den * ngIf wie folgt auf Ihren benutzerdefinierten Validator zu setzen:
%Vor%Wenn das funktioniert, können Sie einen anderen Validator erstellen, um das erforderliche native Validierungsverhalten zu simulieren.
%Vor%Und dann benutze die vorherige ngIf wie folgt:
%Vor%Ich habe es nicht getestet, aber logisch sollte es funktionieren.
Tags und Links javascript angular typescript validation angular-material2