Question

我的问题是关于处理大型Angular应用程序的客户端验证。我有一个包含不同组件的大型SPA应用程序，其中包括可重复使用的组件，如zip控件。现在我可以在页面表单中集成这些组件，但是如何触发组件中的元素的验证。对于例如我的zip组件有城市输入框，状态选择框和zip输入框，现在如何从表单提交中触发这些组件的验证？

Answer 1

我现在正在使用以下解决方案。我能够使用此解决方案验证必填字段。

我在指令中创建了两个输入字段，在表单中创建了另一个。我能够显示这两个字段的错误消息。同样，这可以用于其他形式的验证。

这是我的傻瓜 https://plnkr.co/edit/laW9jYoNCszHlPeIl3Vs?p=preview

的script.js

var app = angular.module('validationModule', []);
app.controller('mainCtrl', mainCtrl);
app.directive('testDirective', testDirective);

function testDirective(){
  var testDirective = {
    template: 'First Name: <input type="text" name="fName" required ng-model="user.firstName">'
  };

  return testDirective;
}

mainCtrl.$inject = ['$scope'];

function mainCtrl($scope){
  $scope.submitForm = function(user){
    alert(user.firstName + " " + user.lastName);
  }
}

Index.html文件

<!DOCTYPE html>
<html ng-app="validationModule">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js" charset="UTF-8"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.js" charset="UTF-8"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-sanitize.js" charset="UTF-8"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js" charset="UTF-8"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="script.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="myForm" ng-submit="myForm.$valid? submitForm(user) : ''" novalidate>
    <h1>Input User Name</h1><br/>
    <test-directive></test-directive><br/>
    Last Name: <input type="text" name="lName" required ng-model="user.lastName">
    <button type="submit" class="btn btn-danger">Submit</button>

    <div class="alert alert-danger" ng-show="myForm.$submitted">
      <div ng-show="myForm.fName.$error.required">
        First Name is required
      </div>
      <div ng-show="myForm.lName.$error.required">
        Last Name is required
      </div>
    </div>

    <br/><br/><br/>
    <h1>Is form valid? {{myForm.$valid}}</h1>
  </form>
</body>

</html>

验证主页上表单中的指令元素

1 个答案: