angularjs i Bootstrap: czerwony granica na polu wprowadzania nieważny złożyć

Question

ja to podstawowa forma realizowane z wykorzystaniem angularjs i Bootstrap: http://jsfiddle.net/dennismadsen/0stwd03k/

HTML

<div ng-controller="MyCtrl"> 
    <form class="well" name="formTest" ng-submit="save()"> 
     <div class="form-group"> 
      <label for="name">Name*</label> 
      <input type="name" class="form-control" id="name" placeholder="Enter name" required /> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

JavaScript

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 

    $scope.save = function() { 
    }; 
} 

Wynik

polu Nazwa jest wymagana. Kiedy klikam przycisk przesyłania, potrzebuję pola wejściowego, aby mieć czerwoną ramkę, jeśli jest ona nieważna. Jak to zrobić?

Alternatywnie, jeśli nie ustawiam pola wprowadzania i nadal nie będzie ono poprawne, byłoby świetnie, gdyby czerwony karabin był wyświetlany w tym czasie, zamiast czekać na przesłanie formularza.

Answer 1

Pierwszą rzeczą, którą były brakowało, aby dodać ng-model='name' do pola wprowadzania, a następnie jedyną formą staną się nieważne na kliknięcie przesłać, w przeciwnym razie formularz będzie zawsze ważny, ponieważ uważa, że ​​nie ma w nim pola.

Wtedy bym dodać klasę submitted na submit kliknięcie przycisku, a następnie umieścić css granica jak .submitted byłby rodzic i dziecko .ng-invalid byłoby więc możemy umieścić styl na .submitted .ng-invalid

HTML

<div ng-controller="MyCtrl"> 
    <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" > 
     <div class="form-group"> 
      <label for="name">Name*</label> 
      <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required /> 
     </div>{{submitted}} 
     <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button> 
    </form> 
</div> 

CSS

.submitted .ng-invalid{ 
    border: 1px solid red; 
} 

Working Fiddle

Mam nadzieję, że to pomoże, dzięki.

Answer 2

Twitter Bootstrap ma klasę has-error, więc chciałbym użyć w połączeniu z ng-class dla grupy formularz, a następnie etykieta z label i label-danger klas na dokładkę:

<div class="form-group" ng-class="{'has-error': errors.Name }"> 
    <label for="name">Name*</label> 
    <input type="name" class="form-control" id="name" placeholder="Enter name" required /> 
    <span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span> 
</div> 

Następnie w kontroler, mieć obiekt errors i ustawić właściwość tego parametru na ciąg znaków, gdy nazwa jest niepoprawna.

Answer 3

Zasadniczo potrzebujesz korekcji kątowej, aby przejąć walidację, więc dodaj novalidate do formularza. Również dodać ng-class do input pola do określenia pogoda dodać błędzie CSS

<form name="myForm" novalidate ng-submit="test()"> 
    <input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''"> 
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
     <span ng-show="myForm.user.$error.required">Username is required. </span> 
</span> 

<p> 
    <input type="submit" 
    ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
    myForm.email.$dirty && myForm.email.$invalid"> 
</p> 
</form> 

Powodzenia ..