Come rendere Angular Forms Le classi ngModel ereditano dalle classi Bootstrap Forms

Question

Sto utilizzando Bootstrap 4 per modellare i miei controlli di modulo e voglio usare gli stili Bootstrap Forms validation quando Angular ngModel adds CSS classes to forms, come ng-valid, ng-invalid, ng-dirty, ng-pending.

Per esempio, se ho il seguente modulo

<form novalidate> 
    <input type="email" class="form-control" ng-model="user.email" required /> 
</form> 

e voglio applicare la classe di Bootstrap .has-danger quando il controllo non supera la convalida dei dati con angolare (vale a dire quando ngModel aggiunge la classe .ng-invalid). Come realizzare questo o qualcosa dell'effetto di

input.ng-invalid { 
    /* inherit from bootstrap's 
    .form-control-danger */ 
    } 

Answer 1

Vorrei usare ng-class per applicare le classi di bootstrap. Bootstrap definisce lo stile delle classi una volta applicato.

<form name='myForm'> 
    <input type="email" name='input' class="form-control" ng-model="user.email" ng-class="myForm.input.$valid ? '' : 'has-danger' " required /> 
//or get fancy with the object argument form of ng-class 
... ng-minlength='3' ng-class="{ 
     has-success: myForm.input.$valid, 
     has-warning: myForm.input.$error.minlength, 
     has-error: myForm.input.$error.required}" 

Checkout: https://docs.angularjs.org/api/ng/directive/form

Answer 2

In Angular2 è possibile utilizzare lo stesso approccio come la risposta @Tyler, ma con la nuova sintassi.

<div 
    class="form-group" 
    [ngClass]="{ 'has-success': user.valid, 'has-error': user.invalid}" 
> 
    <input 
     type="text" 
     class="form-control" 
     id="usr" 
     name="usr" 
     required 
     #user="ngModel" 
     [(ngModel)]="model.usr" 
    > 
</div> 

si crea una nuova variabile denominata user, linea #user="ngModel", che contiene lo stato modello per l'input dell'utente. E con [ngClass]="{ 'class-name': bool-expression}" assegni le classi quando diventano reali.

Tieni presente che è necessario inserire i nomi delle classi come stringhe se non sono un identificatore JavaScript valido (ad esempio hanno un -).