Question

我真的很有角度，我只是浏览它迄今为止令人难以置信的令人印象深刻的功能......我创建了这个简单的用户名字段验证：

<!Doctype html>
<html>
    <head>
    <title>form validation</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    </head>

    <body>
        <form name="form">
            Name:
            <input type="text" 
            name="uName"
            placeholder="username"
            ng-minlength=3
            ng-maxlength=20
            ensure-unique="username" required /><br />

            <div ng-show="form.uName.$dirty && form.uName.$invalid">
                <small ng-show="form.uName.$error.required">please put your username in</small>
                <small ng-show="form.uName.$error.minlength">it has to be at least 3 characters</small>
                <small ng-show="form.uName.$error.maxlength">it can't be longer than 20 characters</small>>
                <small ng-show="form.uName.$error.unique">this one has already been taken</small>
            </div>
        </form>
    </body>
</html>

然而它只显示了所有的验证错误......我现在明白为什么，我也错过了一个模型，但我再次不知道是否有必要。

Answer 1

http://jsbin.com/hekaz/1/edit

<form name="form">
            Name:
            <input type="text" 
                   name="uName"
            placeholder="username"
            ng-minlength=3
            ng-maxlength=20
            ensure-unique="username" required ng-model="username"/><br />

    <div ng-show="form.uName.$dirty && form.uName.$invalid">
                <small ng-show="form.uName.$error.required">please put your username in</small>
                <small ng-show="form.uName.$error.minlength">it has to be at least 3 characters </small>
                <small ng-show="form.uName.$error.maxlength">it can't be longer than 20 characters</small>
                <small ng-show="form.uName.$error.unique">this one has already been taken</small>
            </div>
        </form>

Answer 2

我注意到了三件事。

1.你错过了html标签上的ng-app：

<html ng-app="myApp">

2.你错过了一个控制器，即：

<script>
    var myApp = angular.module('myApp', []);
    function ControllerCtrl ($scope) {
        $scope.username='';
    };
</script>

3.您在输入中错过了ng-model：

ng-model="username"

完整的工作代码：

<!Doctype html>
<html ng-app="myApp">
    <head>
    <title>form validation</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            function ControllerCtrl ($scope) {
                $scope.username='';
            };
        </script>
   </head>

    <body>
        <form name="form">
            Name:
            <input type="text" 
            name="uName"
            placeholder="username"
            ng-minlength=3
            ng-maxlength=20
            ensure-unique="username" required ng-model="username"/><br />

            <div ng-show="form.uName.$dirty && form.uName.$invalid">
                <small ng-show="form.uName.$error.required">please put your username in</small>
                <small ng-show="form.uName.$error.minlength">it has to be at least 3 characters</small>
                <small ng-show="form.uName.$error.maxlength">it can't be longer than 20 characters</small>>
                <small ng-show="form.uName.$error.unique">this one has already been taken</small>
            </div>
        </form>
    </body>
</html>

angular js表单始终显示验证警报

2 个答案: