ng-message如何与模型连接,如何使用ng-message显示消息?

ps0604

在这种小问题中,目标是根据控制器中的验证(而不是内置requiredmin-length显示错误消息设置ng-message-exp时,不显示消息错误。关于如何使这项工作更好或如何ng-message实际工作的任何想法都与错误或模型相关联?

的HTML

<body ng-app="ngMessagesExample" ng-controller="ctl">

  <form name="myForm" novalidate ng-submit="submitForm(myForm)">
    <label>
      This field is only valid when 'aaa' is entered  
      <input type="text"
             ng-model="data.field1"
             name="field1" />
    </label>
    <div ng-messages="myForm.field1.$error" style="color:red">
        <div ng-message-exp="validationError">this is the error</div>
    </div>

  <br/><br/>
  <button style="float:left" type="submit">Submit</button>
</form>

Java脚本

var app = angular.module('ngMessagesExample', ['ngMessages']);

app.controller('ctl', function ($scope) {

  $scope.submitForm = function(form) {

    if (form.field1.$modelValue != 'aaa') {
        $scope.validationError = true;
        console.log('show error');
    }
    else {
        $scope.validationError = false;
        console.log('don\'t show error');
    }
  };


});
ryanyuyu

您的主要ng-messages论点是束缚的myForm.field1.$error,但是您从未真正在变量上添加错误form.field1.$error因此,在您的控制器中,只需$error通过$setValidity(field, isValid)以下命令手动向对象添加错误

if ($scope.data.field1 != 'aaa') {
    form.field1.$setValidity('validationError', false);
    // Angular will make form.field1.$error.validationError = true;
}
else {
    form.field1.$setValidity('validationError', true);
    // Angular will make form.field1.$error.validationError = false;
}

然后,您可以让ng-message指令执行其工作。提供的子元素已经ng-message被评估为其父级的属性ng-messages(请注意额外的s)。因此,通常将其与父元素一起用作form元素的$error对象,而将内部子元素用作$error.required的属性$error.validationError不需要ng-message-exp这里:

<div ng-messages="myForm.field1.$error" style="color:red">
    <div ng-message="validationError">this is the error</div>
</div>

固定塞

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章