AngularJSはテンプレートで検証します

Question

テンプレート自体から入力を検証したいと思います。

それは入力が有効であるときを示していないNG-ショースパン

私は私がここで間違ってやっている何を考えに持っている：

は

<form name="registerForm" class="js-validation-register form-horizontal push-50-t push-50"> 
    <div class="form-group"> 
     <div class="col-xs-12"> 
      <div class="form-material form-material-primary"> 
       <input class="form-control" type="text" id="username" name="username" placeholder="Please enter a username" ng-required="true"> 
       <label for="username"> 
        <span ng-show="registerForm.username.$valid" class="text-success"><i class="fa fa-check-circle"></i></span> 
        Username 
       </label> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

ng-modelをyに追加するのを忘れた私たちの入力。デモの作業

：

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

 
myApp.controller('MyCtrl',function($scope) { 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="registerForm" class="js-validation-register form-horizontal push-50-t push-50"> 
 
    <div class="form-group"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-material form-material-primary"> 
 
       <input class="form-control" type="text" id="username" name="username" placeholder="Please enter a username" ng-model="username" ng-required="true"> 
 
       <label for="username"> 
 
        <span ng-show="registerForm.username.$valid" class="text-success">username is valid</span> 
 
        Username 
 
       </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</form> 
 
</div>

Answer 2

あなたはあなたの助けを必要としてくださいあなたの入力にng-modalを追加するには

<input class="form-control" ng-modal="modal" type="text" id="username" name="username"placeholder="Please enter a username" ng-required="true">