angularjs - 基于其他控件验证表单控件，在validate函数中访问其他控件

Question

我想根据以下内容验证电子邮件和电话:

如果电子邮件和电话号码均为空，或者包含它们的值无效，则两者均无效，并显示消息“请提供有效的电子邮件地址或电话号码。”

如果电子邮件地址无效，则该地址无效，可能会显示上述消息加上“这不是有效的电子邮件地址。”，手机也是如此。

这是我到目前为止得到的:

模板/html:

      <input type="email" name="email" class="form-control"
        id="useredit:email" 
        data-ng-model="userInfo.email"
        data-user-validate='email'
      >
      <span class="glyphicon form-control-feedback"
            data-ng-class="setValidGlyph(userEdit.email,'mail');"
            data-ng-show='!userEdit.email.$pristine'
            data-tooltip-html-unsafe=
              "{{getValidateMessage(userEdit.email,'email');}}"
            data-tooltip-trigger='click'
            data-tooltip-placement='bottom'
            data-tooltip-append-to-body='true'
            ></span>

setValidGlyph 来自 appSettings 并确定要显示的字形:

setValidGlyph:function(input,fieldName){
  return {
    'glyphicon-info-sign':input.$error[fieldName] && !input.$pristine
    ,'glyphicon-ok': !input.$error[fieldName] && !input.$pristine
  };
}

getValidateMessage 来自 appRules，并将根据验证器函数设置为 true 的内容显示消息(请参阅稍后的代码)。

data-tooltip 是 ui 引导工具提示。

指令:

angular.module('app').directive('userValidate'
 , ['appSettings', 'appRules', function(appSettings,appRules) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      var fn=appRules.user.validate(attrs.userValidate);
      ctrl.$parsers.unshift(
        function(viewValue){
          fn(viewValue,ctrl);
        }
      );
      ctrl.$error.messages=
        appRules.user.validateMessages[attrs.userValidate];
    }
  };
}]);

规则:

angular.module('app').factory('appRules'
 , ['appSettings',function(appSettings){
  var appRules = {
    user:{
      validate:function(name){        
        return appRules.user.validateFunctions[name];
      },
      validateFunctions: {
        email:function(viewValue,ctrl){
          //  mail indicates if this box is valid or not used for css
          ctrl.$setValidity('mail'
            , appRules.general.isEmail(viewValue));
          //specific to see if email is valid
          //removed isEmail to make code shorter
          ctrl.$setValidity('invalidEmail'
            , appRules.general.isEmail(viewValue));
        }
      },
      getValidateMessage:function(ctrl,name){
        var ret = [],i=-1,len=ctrl.$error.messages.length;
        while(++i<len){
          if(ctrl.$error[ctrl.$error.messages[i]]){
            ret.push('<p>');
            ret.push(appSettings
              .userFailMessages[ctrl.$error.messages[i]]);
            ret.push('</p>');
          }
        }
        return ret.join('');
      },
      validateMessages: {
        name:['emptyName'],
        email:['invalidEmail','phoneOrEmail']
      }
    }
  };
  return appRules;
}]
);

appSettings.userFailMessages 位于 appSettings 中，如下所示:

appSettings.userFailMessages.invalidEmail="Please provide a valid email.";

在appRules.validateFunctions.email中，我想访问phone.$pristine和phone.$error，但传递的参数只是当前的输入控件，并且无法访问其所在的表单。

我怎样才能访问这个？也许在模板的某个地方我可以设置表单:

{{setForm(userEdit);}}

其中 userEdit 是表单的名称，setForm 是 appRules 的一个方法，但看起来有点草率。

将验证和消息放在规则和设置中的原因是因为我对模板中包含域规则和错误消息感到不舒服。

Answer 1

如果您需要访问指令中的表单，则需要要求它:

require: ['^form', 'ngModel'],
link: function($scope, elem, attrs, ctrls) {
   var form = ctrls[0];
   var ngModel = ctrls[1];

   if(form) {
     // use form to get whatever it is you care about.
     var whatever = form[otherProperty].$error.something;
   }
}

因此，鉴于上述情况，您应该能够将表单 Controller 作为第三个参数传递到自定义验证方法中，并处理您需要的任何内容。

我希望这会有所帮助。