Angularjs - how to get ng-message required error to display and disable input button at the same time

Question

I want an error message to appear if the user clicks submit with no content, and I want the submit button to be disabled. I can get either one working, but not both at the same time.

The code below brings up the message but allows an empty todo item.

<form name="todoForm" novalidate >


    <div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered--> 

    <input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>

    <button input type="submit" ng-click="addTodo()" >Add To List</button><!--disables form if form not valid-->

</form>

This version disables the submit button but doesn't bring up the message

<form name="todoForm" novalidate >


    <div ng-messages="todoForm.new.$error" ng-if="todoForm.$submitted"><div ng-message="required">Add Your Item Below...</div></div><!--message appears until valid input is entered--> 

    <input type="text" name="new" placeholder="start typing..." autofocus data-ng-model="newTodo" required=""/>

    <button input type="submit" ng-click="addTodo()" data-ng-disabled="todoForm.$invalid" >Add To List</button>
</form>

I presume this is because the message can't be displayed when the input button is disabled because nothing has been submitted?

I've tried using $disabled and $invalid instead but they haven't worked.

Billiebilling

unless I'm missing something, what I get from this is that ng-if="todoForm.$submitted" is conflicting with ng-messages="todoForm.new.$error" . i.e. With ng-if present on the same div, I don't see the ng-message="required" text showing up. When I remove ng-if, the required message shows up: plnkr.co/edit/8pE3jmBNYRpPSvyJA0ys?p=preview – Foltz

ng-if="todoForm.$submitted" is conflicting with data-ng-disabled="todo.Form.$invalid" as far as I can see. Your example is not producing the ng-message, isn't that a html5 message? – Billiebilling

Answer 1

I removed the conflicting ng-if on the ng-message element. Here is a working plunk showing the fixed code.

http://plnkr.co/edit/gL0GoFT47mSeydKReLuD

My assumption is that you forgot to inject the 'ngMessages' module as an external dependency.

You can fix your code like this:

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

Ursas

Thanks, but I don't want the message to appear when the page is loaded, just when the user goes to submit without entering anything. I know I have ngMessage working, as I can get it working this way, – Billiebilling

You can just use the $dirty to do that, I have updated the plunk to reflect the change. – Ursas

that doesn't work if the user hasn't entered anything, and just hit submit. – Billiebilling

Based on your post above I want an error message to appear if the user clicks submit with no content, here's an example - plnkr.co/edit/8pE3jmBNYRpPSvyJA0ys?p=preview . In my example, however, the Submit button is ENABLED (and I removed the novalidate option on the form). – Foltz

@Billiebilling the button is disabled when the form is invalid, I dont understand how you are submitting the form with blank data. – Ursas

@user3335993 the problem is the todo list also has a done/not done checkbox which is added with no item to match if the submit form is clicked with no data – Billiebilling

Though you may have found an error in the code, this doesn't answer, what OP asked, as the Question is with Disabled button, isn't it? – Hurdle