Angular errors in Inputs

Question

I have the following form:

        <form name="newCollectionForm" ng-submit="onSubmit()">
            <md-input-container class="md-block">
                <label>Name</label>
                <input name="collection"
                       ng-model="new_collection_model"
                       ng-trim="true"
                       ng-minlength="3"
                       ng-maxlength="50"
                       md-maxlength="50"
                       required>
                <div ng-messages="newCollectionForm.collection.$error">
                    <div ng-message="required">You must supply a name for the Collection.</div>
                    <div ng-message="maxlength">The name must no contain more than 50 characters.</div>
                    <div ng-message="minlength">The name must be at least 3 characters.</div>
                </div>
            </md-input-container>
        </form>

The only Issue is that it does not show the errors messages. It only show the error state but without showing the corresponding message.

I have tried many variants and no success.

Any help?

add novalidate attribute in form

Arpit Srivastava
– Arpit Srivastava

2016-06-12 15:38:41 +00:00
Commented Jun 12, 2016 at 15:38 — Arpit Srivastava
– Arpit Srivastava, Commented Jun 12, 2016 at 15:38
@ArpitSrivastava I had that directive but happens the same

domoindal
– domoindal

2016-06-12 15:42:02 +00:00
Commented Jun 12, 2016 at 15:42 — domoindal
– domoindal, Commented Jun 12, 2016 at 15:42

Deep · Accepted Answer · 2016-06-12 15:56:27Z

1

I have created a plunker for you.

https://plnkr.co/edit/MvFaXjseWt8ILRpsbftq?p=preview

you will have to do the following thing to make your code to work.

1: inject ngMessages in your module.

var app = angular.module('app', ['ngMessages']);

2: include this js file in your code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

Hope this will help you.

edited Jun 12, 2016 at 15:56

answered Jun 12, 2016 at 15:51

Deep

9,7962 gold badges24 silver badges34 bronze badges

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

6 Comments

domoindal Over a year ago

I have both (ngMessages) injected and the resource link too.

Deep Over a year ago

could you just check your code with the plunker code. I have used html provided by you only. Or if you have any plunker where i can check the problem

domoindal Over a year ago

Ok, I'm going to check it out.

domoindal Over a year ago

I open your link and show this: Unable to connect to any application instances.

Deep Over a year ago

Plunker is down currently

|

domoindal · Accepted Answer · 2016-06-12 16:11:40Z

Well, at least I could show the messages making some changes:

        <form name="newCollectionForm" ng-submit="onSubmit()" novalidate>
            <md-input-container class="md-block">
                <label>Name</label>
                <input name="collection"
                       ng-model="new_collection_model"
                       ng-trim="true"
                       ng-minlength="3"
                       ng-maxlength="50" md-maxlength="50" required>
                <div ng-show="newCollectionForm.collection.$error" role="alert">
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.required">You must supply a name for the Collection.</div>
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.maxlength">The name must no contain more than 50 characters.</div>
                    <div class="form_error" ng-show="newCollectionForm.collection.$error.minlength">The name must be at least 3 characters.</div>
                </div>
            </md-input-container>
        </form>

Collectives™ on Stack Overflow

Angular errors in Inputs

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related