AngularJS 在模板上验证答案

【问题标题】：AngularJS validate on templateAngularJS 在模板上验证
【发布时间】：2016-12-15 04:59:59
【问题描述】：

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

当输入有效时，带有 ng-show 的 span 不显示

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

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

请帮忙

【问题讨论】：

你能给我们一些线索，告诉我们什么不工作或行为不符合你的预期吗？
哦，抱歉，刚刚编辑过..
@OzBar-Shalom 你检查我的答案了吗？

标签： javascript html angularjs validation

【解决方案1】：

您忘记在输入中添加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>

【讨论】：

【解决方案2】：

您需要在输入中添加 ng-modal

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

【讨论】：