AngularJS在模板上验证

Question

我想验证来自模板本身的输入。

输入有效时未显示ng-show的跨度

我必须知道我在这里做错了什么：

<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-modal

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

Answer 2

您忘记在输入中添加ng-model 。

工作演示：

 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>