如何添加验证。 在AngularJS的输入字段中？

Question

你能告诉我如何添加验证。 在 Angular js 的输入字段中？ 实际上我正在制作一个由json生成的表单。我已经添加了所需的验证。如果用户提交了空白值，它会显示“红色边框” 。但是我需要更多的验证，比如

1. 用户不会在用户名和姓氏中输入“数字”或 (123)
2. 用户不会输入无效值示例“test”、“abc” 。这两个是无效值。如果用户输入这些值形式应该是无效的。

我可以在字段中添加自定义验证吗

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 1

您需要为输入字段的实时验证创建一个自定义指令。它将根据您的条件为输入字段提供有效和无效的CSS 类以更改错误警报样式，例如，当字段无效时，您可以使边框变为红色。

假设您知道如何设置样式移动到下一部分：

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

你的指令将被写成：

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();
        });

    }

};
});

如果您希望您的表单在任何字段无效时不会提交，那么您的表单标签将变成这样：

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

请记住为您的表单命名并使用该名称来验证整个表单。

这是您要求@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();
    });

}

};
});

你的 html 输入元素：

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