使用ng-class，ng-form和'has-error'验证角度js [英] Validation in angular js using ng-class , ng-form and 'has-error'

问题描述

你好。所有人都可以通知我我错过的一点

hello all ..Can any one notify me about the point i am missing

<ng-form name="myForm" novalidate ng-app="myApp" ng-controller="appCtrl">

             <div class="form-group"  ng-class="{'has-error': myForm.name.$invalid && !myForm.name.$pristine}">
                <label>Name</label>
                <input type="text" required ng-model="name" name="name"  />
            </div>

            <div class="form-group"  ng-class="{'has-error': myForm.age.$invalid}">
                <label>Age</label>
                <input type="text" required ng-model="age" name="age"  />
            </div>

            <input type="button" ng-click="click()" value="clcik"  class="btn btn-primary" />

         </ng-form>

此代码无法正常工作..什么我想要的是当页面加载时，'has-error'应该应用于名称和年龄输入，它们应该用颜色镶边（突出显示字段）。但就我而言，这种情况并没有发生。我不知道我错过了什么。

this code is not working properly .. what i want is when the page loads the 'has-error' should be applied on name and age inputs and they should be bordered with color ( highlight the fields). but in my case this is not happening. I dont know what i am missing.

angular.module('myApp', []).
controller('appCtrl', function ($scope) {
    $scope.name = "";
    $scope.age = "";


    $scope.click = function () {
        if ($scope.myForm.$valid) {
            alert('our form is amazing');
        }
    }

});

当我写自己的'has-error'css类风格时。整个div变得突出。

我已经包含了bootstrap.min和angular js ..可以任何一个帮助

Also when i write my own 'has-error' css class style. the whole div gets higlighted.
I have included bootstrap.min and angular js.. can any one help

推荐答案

invalid&& ; ！myForm.name。

invalid && !myForm.name.

pristine} >
< 标签 > 名称< / label >
< 输入 type = text < span class =code-attribute> required ng-model = name 名称 = 名称 / >
< / div >

< div class = form-group ng-class = {'has-error'：myForm。年龄。

pristine}"> <label>Name</label> <input type="text" required ng-model="name" name="name" /> </div> <div class="form-group" ng-class="{'has-error': myForm.age.

无效} >
< label > 年龄< / label >
< 输入 type = text 必需 ng-model = age < span class =code-attribute> name = age / > ;
< / div >

< 输入 type = 按钮 ng-click = click（） value = clcik class = btn btn-primary / >

< / ng-form >

invalid}"> <label>Age</label> <input type="text" required ng-model="age" name="age" /> </div> <input type="button" ng-click="click()" value="clcik" class="btn btn-primary" /> </ng-form>

此代码无法正常工作..我想要的是当页面加载'has-error'时应该应用于名称和年龄输入，它们应该用颜色镶边（突出显示字段）。但就我而言，这种情况并没有发生。我不知道我错过了什么。

this code is not working properly .. what i want is when the page loads the 'has-error' should be applied on name and age inputs and they should be bordered with color ( highlight the fields). but in my case this is not happening. I dont know what i am missing.

angular.module('myApp', []).
controller('appCtrl', function (

这篇关于使用ng-class，ng-form和'has-error'验证角度js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！