JSFiedle hier: Ссылка
Ich erstelle dynamisch Formulare und Schaltflächen und möchte die Schaltflächen deaktivieren, wenn die erforderlichen Formulareingaben nicht abgeschlossen sind.
HTML:
%Vor%JavaScript:
%Vor% choicesForm.$invalid ist false und ändert sich nicht, wenn Text in das Eingabefeld eingegeben wird.
Lösung:
Am Ende habe ich die Anweisung angular-bind-html-compile von hier verwendet: Ссылка
Hier ist das relevante Bit des Arbeitscodes:
%Vor%Und die Auswahlmöglichkeiten könnten ein Snippit von HTML wie folgt sein:
%Vor% Das Hauptproblem ist, dass ngBindHtml das HTML nicht kompiliert - Es fügt den HTML-Code so ein, wie er ist. Sie können sogar die dynamische Eingabe überprüfen und sehen, dass sie nicht die ngModels CSS-Klassen ( ng-pristine , ng-untouched , usw.), was eine große rote Flagge ist.
In Ihrem Fall weiß das Formular einfach nicht, dass Sie eine weitere Eingabe hinzugefügt haben oder irgendetwas hat sich geändert. Sein Zustand ($ pristine, $ valid, etc) wird nicht durch seinen HTML-Code, sondern durch den registrierten NgModelControllers
<input required type='text'> keinen Einfluss auf die Gültigkeit des Formulars, auch wenn es erforderlich ist, da es ngModel nicht zugewiesen ist. <div ng-model="myDiv" required></div> wird sich darauf auswirken, da es benötigt wird und ihm ngModel zugewiesen ist. Die ngDisabled Anweisung für Ihre Schaltflächen funktioniert wie erwartet, da sie von forms $ ungültige Eigenschaft .
Sieh dir diese Geige an, die zeigt, wie ngModel seinen Controller registriert. Beachten Sie, dass das HTML mit der dynamischen Eingabe nach 750 ms kompiliert wird, um zu zeigen, wie NgModelControllers nach FormController wurde instanziiert.
Es gibt ein paar Lösungen in Ihrem Fall:
verwenden Sie eine benutzerdefinierte Anweisung, um HTML zu binden und zu kompilieren - wie dieser
Verwenden Sie ngInclude , das den HTML-Code kompiliert
Verwenden Sie $ compile , um das neu hinzugefügte HTML zu kompilieren, aber das ist ein bisschen schwierig da Sie nicht genau wissen, wann diese Aktion ausgeführt werden soll
Dies ist eine unvollständige Antwort, weil ich den Code im Moment nicht machen kann.
Ich denke, dass Ihr HTML-Code enthalten sein wird, nicht kompiliert. Daher sind die Eingaben nicht an Winkelelemente gebunden und sind nicht Teil des eckigen Formularobjekts.
Der einzige Weg, den ich sehe, ist eine Direktive, die das übergebene HTML kompiliert und es zu Ihrem Formular hinzufügt. Dies kann jedoch ziemlich schwierig sein, wenn Sie auf diese Weise gehen möchten, schlage ich vor, Ihre Frage zu bearbeiten, um nach der besagten Anweisung zu fragen.
Allerdings bin ich mit $ compile nicht wirklich vertraut, daher weiß ich nicht, ob es funktioniert, einfach $ compile um $ sce.trustAsHtml ()
hinzuzufügen Dies ist die Lösung, nach der Sie suchen. Sie benötigen eine benutzerdefinierte Anweisung. In meinem Beispiel habe ich eine Direktive namens compile-template verwendet und in div element eingefügt.
Richtliniencode:
%Vor%Ich fand die Richtlinie in dieser Geige .
Ich glaube, was wirklich passiert, aber aufgrund von jfiddle kann ich die eigentlichen Bereiche, die hier erstellt werden, nicht sezieren.
%Vor%Das erste Div ist Ihr Top-Level-Bereich, Ihr Formular ist der erste untergeordnete Bereich. Wenn Sie das div mit einer Funktion hinzufügen, wird das dynamisch hinzugefügte Eingabefeld als untergeordnetes Element des ersten untergeordneten Elements, eines Enkels des Bereichs auf oberster Ebene, erstellt. Daher kennt Ihr Formular die Elemente, die Sie dynamisch hinzufügen, sodass nur das statische Feld für einen gültigen Formulareintrag erforderlich ist.
Eine bessere Lösung wäre es, ng-inclue für zusätzliche Formularfelder zu verwenden oder wenn Ihr Formular nicht zu groß ist, legen Sie es einfach auf die Seite oder Vorlage, die Sie verwenden.
Tags und Links javascript html angularjs