CODEWITHSUNDEEP
htmlangularjsvalidation
Santhosh Aineri
Santhosh Aineri

Reputation: 559

how to validate particular input field using angularjs?

I am trying to validate some input fields using angularJS. I found some example. But they are validating entire form. 

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" ng-model='name' ng-required="true" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
    </form>

</div>

and controller code is 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name=undefined;
    $scope.preview = function(){
        alert("Previewed");
    };
    $scope.update = function(){
        alert("Updated");
    }
});

The above code validating the fields based on form name. But I wanted to know is there any way to validate that particular input field ?

Upvotes: 0

Views: 2650

Answers (2)

Shashank
Shashank

Reputation: 2060

Check out the fiddle here.

Just add a name to the input filed and follow the same as you did to the form.

HTML:

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" ng-model='name' ng-required="true" name="txtName" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
        <div>Status of name: <span style="color: blue">{{myform.txtName.$valid}}</span></div>

    </form>

</div>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.name = undefined;
    $scope.preview = function () {
        alert("Previewed");
    };
    $scope.update = function () {
        alert("Updated");
    }
});

Upvotes: 0

Louie Almeda
Louie Almeda

Reputation: 5612

DEMO Yes you can, you must specify a name for the input like

<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform">
        <input type="text" name='name' ng-model='name' ng-required="true" />
        <input type="password" ng-model='password' ng-required="true" />
        <button ng-click="myform.$valid && preview()">Preview</button>
        <button ng-click="myform.$valid && update()">Update</button>
    </form>

</div>

then you can check if the name is valid with myForm.name.$valid

Upvotes: 2

Related Questions