CODEWITHSUNDEEP
javascriptangularjs
Md. Sahidul Islam
Md. Sahidul Islam

Reputation: 351

How to check validity a few required field of a form in angular?

I have a form named "myForm" and I have a lot of required fields. 

<input type="text" name="form.user.name" ng-model="form.user.name" required/>
<input type="text" name="form.user.email" ng-model="form.user.email" required/>
<input type="text" name="form.user.phone" ng-model="form.user.phone" required/>

<input type="text" name="form.user.accountNumber" ng-model="form.bank.accountNumber" required/>
<input type="text" name="form.user.accountName" ng-model="form.bank.accountName" required/>

Now I just want to check validity of only form.user information. How can I do this?

Upvotes: 4

Views: 1677

Answers (3)

Manikandan Velayutham
Manikandan Velayutham

Reputation: 2228

Refer angular Validation https://docs.angularjs.org/guide/forms Give different name. you are given same name last three input types.

   <input type="text" name="form.user.name" ng-model="form.user.name" required/>
<input type="text" name="form.user.email" ng-model="form.user.email" required/>
<input type="text" name="form.user.phone" ng-model="form.user.phone" required/> // same name all three name="form.user.phone"

<input type="text" name="form.user.phone" ng-model="form.bank.accountNumber" required/> // same name all three name="form.user.phone"
<input type="text" name="form.user.phone" ng-model="form.bank.accountName" required/> // same name all three name="form.user.phone"

Upvotes: 0

Ram_T
Ram_T

Reputation: 8484

Go through this link first
https://docs.angularjs.org/guide/forms

Example of custom validation

<form name="form" class="css-form" novalidate>
  <div>
    <label>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}</label><br />
    <span ng-show="form.size.$error.integer">The value is not a valid integer!</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">
      The value must be in range 0 to 10!</span>
  </div>

</form>

In the below line in ng-show, form is form name, size is input field name, $error is default object to store failed validators. integer is a directive to do the validation of input field.

<span ng-show="form.size.$error.integer">The value is not a valid integer!</span>

script

var app = angular.module('form-example1', []);

var INTEGER_REGEXP = /^-?\d+$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.integer = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }
  };
});

Upvotes: 2

Karthick Nagarajan
Karthick Nagarajan

Reputation: 1345

You can just try..

When you put <form> tag inside you ngApp, AngularJS automatically adds form controller (actually there is a directive, called form that add nessesary behaviour).

So to check form validity, you can check value of $scope.yourformname.$valid property of scope.

Each input name's validation information is exposed as property in form's name in scope.

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

More information you can get at Developer's Guide section about forms.

Upvotes: 1

Related Questions