7

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.

bob.mazzo
  • 5,183
  • 23
  • 80
  • 149
vtechmonkey
  • 123
  • 2
  • 3
  • 11
  • 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: http://plnkr.co/edit/8pE3jmBNYRpPSvyJA0ys?p=preview – bob.mazzo Apr 27 '15 at 14:42
  • 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? – vtechmonkey Apr 27 '15 at 19:27

1 Answers1

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']);
km1882
  • 740
  • 5
  • 22
  • 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, – vtechmonkey Apr 27 '15 at 14:53
  • You can just use the $dirty to do that, I have updated the plunk to reflect the change. – km1882 Apr 27 '15 at 14:54
  • that doesn't work if the user hasn't entered anything, and just hit submit. – vtechmonkey Apr 27 '15 at 14:58
  • Based on your post above `I want an error message to appear if the user clicks submit with no content`, here's an example - http://plnkr.co/edit/8pE3jmBNYRpPSvyJA0ys?p=preview . In my example, however, the Submit button is ENABLED (and I removed the `novalidate` option on the form). – bob.mazzo Apr 27 '15 at 15:12
  • @vtechmonkey the button is disabled when the form is invalid, I dont understand how you are submitting the form with blank data. – km1882 Apr 27 '15 at 15:54
  • @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 – vtechmonkey Apr 27 '15 at 16:05
  • 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? – Nikolaus Oct 08 '20 at 08:57