How ng-message is connected to model, and how can I show the message using ng-message?

Question

In this plunk the objective is to show an error message based on validation in the controller (instead of the built-ins required or min-length). Th

Answer 1

The Dmitry K's answer it's excellent.

I´m going to expand the answer.

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

}

And the relevant HTML code:

<form name="myFormName" novalidate>
    <md-input-container class="md-block">
        <label>myField</label>
        <input ng-model="ctrl.myFieldName" name="myFieldName" ng-change="ctrl.validateField(myFormName)" />

        <div ng-show="myFormName.myFieldName.$touched || myFormName.$submitted">
            <div ng-messages="myFormName.myFieldName.$error">
                <div ng-message="myCustomValidationName">this is the message to show</div>
            </div>
        </div>
    </md-input-container>
</form>

Answer 2

The more proper way to do this in controller is to use $setValidity

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

form.$setSubmitted();

Answer 3

Your main ng-messages argument is tied to myForm.field1.$error, but you never actually add an error to the form.field1.$error. So in your controller, just manually add an error to the $error object via $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;
}

Then, you can just have the ng-message directive do its work. The child elements that provide ng-message are evaluated as properties of their parent ng-messages already (note the extra s). So typically, this is used with the parent being the form element's $error object and the inner children are the properties like $error.required or in your case $error.validationError. No need for ng-message-exp here:

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

Fixed plunker