Add call error message from controller in angular material? - angularjs

Question

I want to add error message, something like this:
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">Here is some message</div>
</div>
</md-input-container>
But want to call rendering from controller:
callMessage() {
// How can I implement this?
}

Answer 1

I assume you are not using controller as syntax, so you will have to define a function on the $scope object within your controller:
function YourController($scope,...){
$scope.callMessage = function(){
//you can access your form using $scope.userForm
return "yourString";
}
}
Your markup would change as follows:
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">{{callMessage()}}</div>
</div>
The important part is that you define your function on the $scope so that Angular actually can bind the {{callMessage()}} part in the markup to your function.

Answer 2

You may do,
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="vm.callMessage(userForm.lastName.$dirty)">
<div ng-message="required">{{vm.myMessage}}</div>
</div>
And from controller
callMessage(isDirty) {
// Your conditional message with respect to "isDirty" parameter
isDirty ? this.myMessage = 'Dirty Message' : false;
return isDirty;
}

Answer 3

You may call directly $error in your controller after you have set up form.
View
<md-input-container>
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
<div ng-message="required">{{errorMsg}}</div>
</div>
</md-input-container>
Controller
var isError = $scope.userForm.lastName.$error;
if (isError) {
$scope.errorMsg = 'Hey, this is error message';
}