Question

In this plunk目标是根据控制器中的验证（而不是内置插件required或min-length）显示错误消息。设置ng-message-exp时，不显示消息错误。任何想法如何使这项工作？

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>

的Javascript

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');
    }
  };


});

Answer 1

您的主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）。通常，这与父元素是表单元素的$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>

Fixed plunker

Answer 2

在控制器中执行此操作的更恰当的方法是使用$ setValidity

if(a !== b){
    form.inputName.$setValidity('custom-err', false);
} else {
    form.inputName.$setValidity('custom-err', true);
}

form.$setSubmitted();

Answer 3

Dmitry K的回答非常好。

我会扩大答案。

//Function before show your form:
vm.showForm(form){
        form.$setPristine();
        form.$setUntouched();
        form.myFieldName.$setValidity('myCustomValidationName', false);

        //More code...
}

//funtion to validate field on "ng-change"
vm.validateField(form){

    if(xxxx == yyy) //Make your own validation{
       form.myFieldName.$setValidity('myCustomValidationName', true);
    }else{
       form.myFieldName.$setValidity('myCustomValidationName', false);
    }

}

显示自定义错误ngMessage

3 个答案: