How to add validation. in input field in AngularJS?

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;


    };

Answer

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 become 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>