如何在角度检查表单的几个必填字段的有效性？

Question

我有一个名为“ myForm”的表单，并且有很多必填字段。

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

现在，我只想检查form.user信息的有效性。 我怎样才能做到这一点？

Answer 1

首先通过此链接
https://docs.angularjs.org/guide/forms

自定义验证示例

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

在ng-show的以下行中， form是表单名称， size是输入字段名称， $error是用于存储失败的验证器的默认对象。 integer是用于验证输入字段的指令。

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

脚本

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

Answer 2

您可以尝试..

当您在ngApp中放入<form>标签时，AngularJS会自动添加表单控制器（实际上有一个指令，称为form ，用于添加必要的行为）。

因此，要检查表单的有效性，可以检查$scope.yourformname.$valid的$scope.yourformname.$valid属性的值。

每个输入name的验证信息在范围内以form名称的form公开为属性。

的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 }

您可以在“开发人员指南”部分中获取有关表格的更多信息。

Answer 3

引用角度验证https://docs.angularjs.org/guide/forms输入不同的名称。 您会在最后三种输入类型中使用相同的名称。

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