agon024 agon024 - 3 months ago 7
AngularJS Question

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

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?

Answer

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.

Comments