如何将自定义验证添加到角度组件？

BetaRide 发表于 Dev

BetaRide

我有这个角度组件，我想在其中添加自定义输入验证器（请参阅plunker）。

我正在尝试访问ngModelController该$onInit函数。但是，这表明该表单当前未填充。稍后，在该sendEmail()函数中，可以访问输入模型控制器。如何访问ngModelController和添加自定义验证器？

emailInput.js

(function(angular) {
  'use strict';

  function EmailInputController($log) {
    var ctrl = this;

    ctrl.$onInit = function() {
      // ctrl.myForm.myEmailInput is not populated 
      //$log.debug("Email view value is: "+(ctrl.myForm.myEmailInput.$viewValue));
    };

    ctrl.sendEmail = function() {
      $log.debug("EmailInputController.sendEmail");
      $log.debug("Email view value is: " + (ctrl.myForm.myEmailInput.$viewValue));
    };

  }

  angular.module('emailInputApp').component('emailInput', {
    templateUrl: 'emailInput.html',
    controller: EmailInputController,
  });
})(window.angular);

emailInput.html

<form name="$ctrl.myForm">
  <label>Email:</label>
  <input name="myEmailInput" type="email" ng-model="$ctrl.email" required maxlength="15">
  <button type="button" ng-click="$ctrl.sendEmail()">Send Email</button>
  <p>Your Email addres is {{$ctrl.email}}</p>
  <div ng-messages="$ctrl.myForm.myEmailInput.$error" role="alert">
    <div ng-message="required">Please enter an email address.</div>
    <div ng-message="email">This field must be a valid email address.</div>
    <div ng-message="maxlength">This field can be at most 15 characters long.</div>
  </div>
  <code>
    {{$ctrl.myForm.myEmailInput | json}}
  </code>
</form>

灵魂

http://plnkr.co/edit/YQfGAsix1DON4ff3EWxz?p=preview

您可以添加观察者并在不再需要时将其删除。

var removeWatch = $scope.$watch('$ctrl.myForm', function () {
        $log.debug("Email view value is: " + (ctrl.myForm.myEmailInput.$modelValue));

        removeWatch();
      });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。