Ich bin ziemlich neu mit Angular und ich versuche, ein Registrierungsformular mit Angular und Bootstrap 4 zu erstellen.
Das Ergebnis, das ich möchte, ist, die Stile von Bootstrap mit der Validierung von Angular zu verwenden. Genauer gesagt wendet Angular beim Validieren des Formulars Stile (ng-valid, ng-invalid usw.) an zwei verschiedenen Stellen an: dem Eingabeelement und dem Formularelement.
Zwei Fragen:
1) Da Bootstrap "has-danger" und "has-success" anstelle von "ng- [in] valid" verwendet, ist es möglich, angular so zu konfigurieren, dass diese Stile anstelle des Standard-Styles verwendet werden. Derzeit überlege ich, den Bootstrap durch Hinzufügen der eckigen Stile zu erweitern (mit @extend has-danger / success)
2) Angular wendet den Stil auf die Eingabe- und Formularelemente an, während der Bootstrap es auf dem Formulargruppenelement erwartet. Ist es möglich, den Stil anstelle des Eingabeelements (oder beides?) Eckig zu setzen?
Ich benutze reaktive Formen und ich möchte Dinge wie (nicht getestet) vermeiden:
%Vor%Gibt es einen einfachen (nicht zu ausführlichen) Weg, dies zu erreichen?
Wenn Sie SASS verwenden, können Sie Folgendes tun, ohne dass Sie alle CSS neu schreiben müssen.
%Vor%Hinweis: Sie müssen den Bootstrap als Teil Ihres SASS-Builds importieren, anstatt ihn direkt zu referenzieren.
Wenn Sie nicht SASS verwenden, ist es schön zu installieren, siehe hier Eckige CLI-SASS-Optionen
Eine andere Option ist diese Direktive:
%Vor% Es fügt einfach die is-invalid -Klasse zu jedem Feld hinzu, wenn das Feld berührt oder ungültig ist. Es verhält sich grundsätzlich genauso wie Olivers SASS-Lösung, kommt aber ohne SASS aus und könnte auch eine kleinere kompilierte Ausgabe haben.
Die beste Idee, die mir bei der Betrachtung der eckigen Dokumente kam, ist die Verwendung einer Direktive. Meine Implementierung funktioniert nur mit reaktiven Formen und wenn das Element, das Sie anwenden möchten, den Stil enthält, enthält das Formular-Steuerelement (was, wenn Sie Bootstrap verwenden, der Fall ist). Sollte zur Kompatibilität mit Select und Textarea erweitert werden.
%Vor%Beispiel:
Die Komponente:
%Vor%Und seine Vorlage:
%Vor%Tags und Links css forms angular twitter-bootstrap-4