agon024 agon024 - 2 months ago 5
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() {
$ '' + carID, { Message: Message } ).
success(function(data) {
$scope.output = data;

Here is my HTML:

<div id="reject" class="animated">
<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>

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>

But for some reason this doesn't work for me. If I remove
forward.$valid &&
and just have it as
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?


I stuck a 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() {
ng-click="reject.$valid && reject2()


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