Angular JS from validation

Question

Iam new to Angular JS. I am writing a login form. the requirement is show a custom message when the user clicks the submit button and the username field is blank.

      <md-input-container>
            <label>{{::vm.labels.username}}</label>
            <input ng-model="vm.oLoginData.sUsername" **required**>
        </md-input-container>
        <md-input-container>

Everything is fine on click of the submit button i get the pop up on the filed " please fill out this field". My question is is there a way to customize the message? If so How. Any help will be much appriciated

The new mesage they what is "Username Field cannot be blank" — Albert Pinto
– Albert Pinto, Commented Aug 4, 2015 at 4:02

Megha Nagpal · Accepted Answer · 2015-08-04 04:29:48Z

1

You can try the code at the plnkr link http://plnkr.co/edit/ngSZN9wjOzVItbf3QU4D?p=preview

I am highlighting the main sections of the code load the module after Angular and then inject it into our application.

    <script src="//code.angularjs.org/1.4.0/angular.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
      <script src="app.js"></script>

HTML
 <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" 
                ng-model="main.name"
                ng-minlength="5"
                ng-maxlength="10"
                required>

            <!-- ngMessages goes here -->
        </div>
<!-- Include the help block for messages over here-->
<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
        <div ng-messages-include="messages.html"></div>
   </div>

In the message.html
Add the code

    <p ng-message="required">This field is required</p>
    <p ng-message="minlength">This field is too short</p>
    <p ng-message="maxlength">This field is too long</p>
    <p ng-message="required">This field is required</p>
    <p ng-message="email">This needs to be a valid email</p>

In the app.js

    angular
      .module('app', ['ngMessages'])
      .controller('MainCtrl', MainCtrl);

    function MainCtrl() {

    }

answered Aug 4, 2015 at 4:29

Megha Nagpal

1804 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Albert Pinto Over a year ago

I have one more question ... can u please tell me how are you hiding the validation text once all the validation criteria is satisfied?

Joy · Accepted Answer · 2015-08-04 04:40:02Z

1

Check demo: JSFiddle.

Use something like:

<div ng-show="vm.oLoginData.sUsername.$dirty && vm.oLoginData.sUsername.$invalid">
     The user name is required. Please fill in.
</div>

edited Aug 4, 2015 at 4:40

answered Aug 4, 2015 at 4:07

Joy

9,60011 gold badges50 silver badges99 bronze badges

5 Comments

Albert Pinto Over a year ago

i tried the div but now the whole issue is that the user like the pop up bubble but they want custom message

Joy Over a year ago

What kind of popup you are using? Bootstrap ui?

Joy Over a year ago

The popup is actually just DOM element, you may try to modify the CSS to make as popup.

Albert Pinto Over a year ago

iam not sure ... we do have bootstrap... As i said iam new to Angular

Albert Pinto Over a year ago

Thanks for that Joy ... I better do something like that

Shashwat Black · Accepted Answer · 2015-08-04 04:07:07Z

0

See if this works,

<span ng-show="name.$error.nameblank">Username Field cannot be blank</span>

And in the directive you use,

ngModel.$setValidity("nameblank",false);

Give it a try.

answered Aug 4, 2015 at 4:07

Shashwat Black

1,0025 gold badges14 silver badges28 bronze badges

2 Comments

Albert Pinto Over a year ago

tried this aslo but now the whole issue is that the user like the pop up bubble but they want custom message in that bubble

Shashwat Black Over a year ago

You would use the setValidity when you want to display the message. You will need to write codes to check whether the name is blank. Are you sure you're doing this right? I need to go right now, I'll get back to this in the afternoon if you need help.

Collectives™ on Stack Overflow

Angular JS from validation

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related