javascript - How to add validation. in input field in AngularJS? - Stack Overflow

admin管理员组

文章数量:1431532

could you please tell me how to add validation. in input field in angular js ? Actually I am making a form which is generated by json .I already add validation of required .if user submitted blank value it show "red border" .But I need more validation like

1. User will not enter "digits" or (123) in user name and last name
2. User will not enter invalid value example "test" ,"abc".These two are invalid values.if user enter these value form should be invalid .

can I add custom validation in fields

$scope.isSubmitClicked = false;

$scope.myform =''
  $scope.c ={
  "ABC": {
    "type": "LABEL",
    "editable": false
  },
  "Title": {
    "value": "Ms",
    "type": "FIELD",
    "editable": false,
    "dataType": "",
    "required":false
  },
  "First Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
     "required":true
  },
  "Middle Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
    "required":false
  },
   "Last Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
    "required":true
  }
}

   $scope.submit = function ($event) {
        $scope.isSubmitClicked = true;


    };

could you please tell me how to add validation. in input field in angular js ? Actually I am making a form which is generated by json .I already add validation of required .if user submitted blank value it show "red border" .But I need more validation like

1. User will not enter "digits" or (123) in user name and last name
2. User will not enter invalid value example "test" ,"abc".These two are invalid values.if user enter these value form should be invalid .

can I add custom validation in fields

http://plnkr.co/edit/YmIMEGHm7E48wZQT9ZSb?p=preview

$scope.isSubmitClicked = false;

$scope.myform =''
  $scope.c ={
  "ABC": {
    "type": "LABEL",
    "editable": false
  },
  "Title": {
    "value": "Ms",
    "type": "FIELD",
    "editable": false,
    "dataType": "",
    "required":false
  },
  "First Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
     "required":true
  },
  "Middle Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
    "required":false
  },
   "Last Name": {
    "value": "",
    "type": "FIELD",
    "editable": true,
    "dataType": "",
    "required":true
  }
}

   $scope.submit = function ($event) {
        $scope.isSubmitClicked = true;


    };

• javascript
• angularjs

Share Improve this question Follow edited Nov 7, 2018 at 9:33 IndexOutOfDevelopersException 1,35477 gold badges1515 silver badges2828 bronze badges asked Nov 7, 2018 at 8:50 user10288182user10288182 4

• Use directives to validate the form. Custom validation in directive will be live. – ahsan ayub Commented Nov 7, 2018 at 8:57
• how ? please suggest me how – user10288182 Commented Nov 7, 2018 at 9:12
• make an attribute based directive with require: 'ngModel', and link it with controller: link: function (s, e, a, ctrl) {, then your custom validation will go into ctrl.$validators.myValidation = function(modelValue, viewValue){...}. Its job is to return true or false if something is valid or not. The error will show up in myform[inputName].$error.myValidation – Aleksey Solovey Commented Nov 7, 2018 at 9:21
• 1 can you please add this my punker – user10288182 Commented Nov 7, 2018 at 9:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You need to create a custom directive for live validation on input fields.It will give valid and invalid CSS class to the input field based on your condition to change the error alert style, e.g you can make your border red when field is invalid.

Assuming you know how to style moving to next part:

<input  ng-required="true" ng-model="modelName" type="text" abc="modelName">

and your directive will be written as:

App.directive("abc", function() {
return {
    require: "ngModel",
    //name your scope key and value.
    scope: {
        abc: "=abc"
    },
    link: function(scope, element, attributes, modelVal) {

        modelVal.$validators.abc= function(val) {
            //Write your logic or condition in this function
           //return false if invalid and return true if valid.
            /*
            if(condition)
            {
                //if true
                reutrn true;
            }
            else{
                //if false
                return false
            }
            */
        };

        scope.$watch("abc", function() {
            modelVal.$validate();
        });

    }

};
});

and if you want that your form won't submit if any field is invalid then your form tag will bee like this :

   <form ng-submit="myForm.$valid && submitFunction()" name="myForm">

remember to give name to your form and use that name to validate the whole form.

Here is the controller you asked for @joy:

  var app = angular.module('plunker', ['angularMoment', 'ui.bootstrap']);

app.controller('MainCtrl', function($scope, moment) {

 $scope.isEditableMode = true;
 $scope.isSubmitClicked = false;

$scope.myform =''
   $scope.c ={
  "ABC": {
"type": "LABEL",
"editable": false
 },
"Title": {
"value": "Ms",
"type": "FIELD",
"editable": false,
"dataType": "",
"required":false
 },
 "First Name": {
"value": "",
"type": "FIELD",
"editable": true,
"dataType": "",
 "required":true
 },
"Middle Name": {
 "value": "",
 "type": "FIELD",
 "editable": true,
 "dataType": "",
 "required":false
 },
"Last Name": {
 "value": "",
 "type": "FIELD",
 "editable": true,
 "dataType": "",
  "required":true
 }
 }

   $scope.submit = function ($event) {
    $scope.isSubmitClicked = true;


 };

 });

 app.directive("checkInput", function() {
  return {
 require: "ngModel",
 //name your scope key and value.

 link: function(scope, element, attributes, modelVal) {

    modelVal.$validators.checkInput= function(val) {
       var numberRegex= /^[0-9]+$/;
       if (val.match(numberRegex))
       {
      return false
       }
       else{
         return true
       }
  
        console.log(val);

    };

    scope.$watch("val", function() {
        modelVal.$validate();
    });

}

};
});

your html input element:

 <input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked" check-input>

本文标签： javascriptHow to add validation in input field in AngularJSStack Overflow