Angular 使用 Ng 模型进行表单验证

Question

问题：如果无法命名表单及其元素，如何仅使用 ng-model 显示验证错误。

我有一个 html 表格来收集信用卡详细信息。为了防止信用卡数据接触我的服务器，我无法命名表单元素。所以我的表格看起来像：

<form ng-submit="vm.processForm()">

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number" ng-model="vm.number" required>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YY)</span>
      <input type="text" size="2" data-stripe="exp_month" ng-model="vm.exp_month" required>
    </label>
    <span> / </span>
    <input type="text" size="2" data-stripe="exp_year" ng-model="vm.exp_year" required>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc" ng-model="vm.cvc" required>
    </label>
  </div>

  <input type="submit" class="submit" value="Submit Payment">
</form>

通常在 Angular 中，我使用表单元素名称来检查验证，例如：

<p ng-show="userForm.creditcard.$error.required">Your credit card number is required.</p>

但是由于我无法命名表单及其元素，我如何仅使用 ng-model 来显示验证错误？因为，以下不起作用：

<p ng-show="vm.number.$error.required">Your credit card number is required.</p>

我正在使用 Angular v1.4.8.

Answer 1

我创建了一个导出模型控制器的指令。我认为这不是最好的方法，但它确实有效。

.directive('exportModel', function () {
    return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attr, ngModel) {
        attr.$observe('exportModel', function (value) {
        scope[value] = ngModel;
      })
    }
  }
})

http://jsfiddle.net/Lvc0u55v/11352/

Angular 使用 Ng 模型进行表单验证

Angular Form Validation using Ng Model

angularjs

angularjs-ng-form

angularjs-validation