Mike Feltman Mike Feltman - 2 months ago 13
AngularJS Question

ngMessages with Angular 1.5.x Component

I just tried introducing ngMessages into my app that's using Components that were added in 1.5. As soon as I include any reference to ngMessage in my template I'm receiving this error message:


Error: $compile:ctreq Missing Required Controller.

This is a common error with ngMessages and the normal remedy is
suggested here:
https://docs.angularjs.org/error/$compile/ctreq?p0=ngMessages&p1=ngMessage


However, I'm using components, which are a special type of directive and this doesn't appear to be an option for components.

Has anyone gotten ngMessages to work within a component in 1.5?

The syntax for use with a directive is like this:

myApp.directive('myDirective', function() {
return {
require: 'ngModel',
...
}
}


The component documentation: https://docs.angularjs.org/guide/component doesn't cover an equivalent to
require
.

Answer

This might help you.

<form name="userLoginForm" autocomplete="off">
    <input type="text" minlength="10" maxlength="10" ng-pattern="/^[0-9]+$/" required ng-model="userData.mobileNumber" placeholder="Enter Mobile Number" class="form-control login-form-input" id="mobileNumber" name="mobileNumberInput"/> 
    <div ng-messages="userLoginForm.mobileNumberInput.$error" role="alert">
      <div ng-message="required">
          This field is required
      </div>
      <div  ng-message="pattern">
        Enter correct mobile number
      </div>
      <div ng-message="minlength, maxlength">
          Your mobile number must 10 characters long</div>
      </div>
   </div>

Comments