AngularJS - Require input field before running function with ng-click

Question

I need to make sure that users puts a message in a textarea box before they submit the form with ng-click.

Here is the function that is going to run when ng-click is clicked:

$scope.reject = function() {
  $http.post( 'http://server.com/api/reject/' + carID, { Message: Message } ).
  success(function(data) {
    $scope.output = data;
  })
}

Here is my HTML:

<div id="reject" class="animated">
  <h3>WARNING</h3>
  <p>Your are about to <strong><u>REJECT</u></strong> this CAR. Are you sure this is the action that you want to take?</p>
  <form name="reject">
    <textarea placeholder="Message" ng-model="Message" ng-required="true"></textarea>
    <button ng-click="reject.$valid && reject()">Reject</button>
  </form>
</div>

My HTML ng-click code it got from this SO post:

<form name="myform">
  <input type="text" ng-model='name' ng-required="true" />
  <button ng-click="myform.$valid && preview()">Preview</button>
  <button ng-click="myform.$valid && update()">Update</button>
</form>

But for some reason this doesn't work for me. If I remove forward.$valid && and just have it as ng-click="reject() it runs just fine although I can still run it without putting in a message. I need the textarea to be required. So I need to validate before the function runs. The snippet I got off the other post should work but I don't know why it isnt.

EDIT - Here is a fiddle: My Fiddle

Now the message box is mine and the other one below that is someone else's working fiddle. I don't see why mine isn't working.

Can someone tell me what i am doing wrong?

Wouldn't the reject.$valid be false because the form is not valid if the <textarea> is not populated. It would be invalid because it is ng-required. Therefore, the function will not run. — adam-beck
– adam-beck, Commented Aug 17, 2016 at 20:11
jsfiddle.net/r8d1uq0L/224 ........Now the message box is mine and the other one below that is someone else's working fiddle. I don't see why mine isn't working — agon024
– agon024, Commented Aug 17, 2016 at 20:55

Kraken · Accepted Answer · 2016-08-17 21:25:18Z

2

I stuck a console.info into your working preview function and found that your reject value on the $scope is registering as a constructor. I can only guess that you have found a keyword. I changed the name of the function to reject2 and it appeared as a function and runs the alert you requested. Here is a working fiddle

$scope.reject2 = function() {
    alert("hi");
  }
ng-click="reject.$valid && reject2()

Update

Sorry I shared your fiddle link the first time. It is updated now.

edited Aug 17, 2016 at 21:25

answered Aug 17, 2016 at 21:18

Kraken

5,9603 gold badges31 silver badges52 bronze badges

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

1 Comment

agon024 Over a year ago

Ya that worked I didn't realize the form name and function name needed to be different. Thanks for the help

Dan J. · Accepted Answer · 2016-08-17 21:15:57Z

1

You need to change the reject to something else in <form> and ng-click and anywhere else. It is a protected keyword.

answered Aug 17, 2016 at 21:15

Dan J.

364 bronze badges

2 Comments

agon024 Over a year ago

Thats not it at all. jsfiddle.net/r8d1uq0L/225 changed it in this fiddle at it still does not work.

Cosmin Ababei Over a year ago

@agon024 Don't name the form and the function the same thing. This is the underlying problem. Here's the proof.

Collectives™ on Stack Overflow

AngularJS - Require input field before running function with ng-click

2 Answers 2

Update

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related