Ich benutze Angular mit Bootstrap. Hier ist der Code als Referenz:

<form name="newUserForm" ng-submit="add()" class="" novalidate>
    <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
    <button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>

Bootstrap hat Stile für ungültige Felder in Form voninput:invalid {.... }; Diese treten ein, wenn das Feld leer ist. Jetzt habe ich auch einen Pattern Matching über Angular. Dies führt zu ungewöhnlichen Fällen, in denen ": invalid" deaktiviert ist, ".ng-invalid" jedoch aktiviert ist, sodass ich die Bootstrap-CSS-Klassen für die Klasse ".ng-invalid" erneut implementieren müsste.

Ich sehe zwei Möglichkeiten, habe aber Probleme mit beiden

Make Angular verwendet einen benutzerdefinierten Klassennamen anstelle von "ng-valid" (ich weiß nicht, wie das geht).Deaktivieren Sie die HTML5-Validierung (ich dachte, dass dies das "novalidate" -Attribut im Formular-Tag sein sollte, konnte es aber aus irgendeinem Grund nicht zum Laufen bringen).

Die Angular-Bootstrap-Direktiven behandeln das Styling nicht.