CODEWITHSUNDEEP
angularjsvalidationng-messages
Jadenkun
Jadenkun

Reputation: 327

ngMessage/ngMessages do not work , AngularJS

I'm trying to validate a phone number using the ngMessages and ngMessage directives, but I am facing two problems:

  1. The "Invalid Input" message is shown only after the pattern's expression is met and the user continued typing.
  2. The "required" message is not shown when the input is empty.

I want the "Invalid Input" to be shown as soon as the user starts typing, and not only after the pattern is met.

I don't understand what is wrong with my code, so I'd appreciate any help.

<form name="PhoneForm">
    <div>
        <md-icon md-svg-src="icons/ic_phone_48px.svg"></md-icon>
        <md-input-container>
            <label>Phone</label>
            <input ng-model="contactPhone" name="PhoneInput" required ng-pattern="/^(05){1}[0-9]{8}$/"/> <!-- i.e 05x-xxxxxxx -->
            <div ng-messages="PhoneForm.PhoneInput.$error" ng-if="PhoneForm.PhoneInput.$dirty">
                <div ng-message="required">This field is required!</div>
                <div ng-message="pattern">Invalid Input!</div>                         
            </div>
        </md-input-container>
    </div>

Thank you

Upvotes: 1

Views: 146

Answers (0)

Related Questions