only execute function with ng-click if input fields are not empty

Question

I only want to perform this function if the other two fields are not empty, not sure how to do it.

ng-click="saveToList($event)"

HTML

  <div class="col-xs-5">
              <label for="exampleInputPassword1">Enter a Title/Description</label>
                <input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" />
            </div>
            <div class="col-xs-5">
                <label for="exampleInputPassword1">Enter a URL</label>
                <input type="text" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" />
          </div>
          <div class="col-xs-2">
              <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post">Post</a>
          </div>

app.js

$scope.saveToList = function(event) {

    var mvName = $scope.mvName.trim();
    var mvUrl = $scope.mvUrl.trim();

    if (mvName.length > 0) {
      $scope.favUrls.$add({
        name: mvName,
        title: mvUrl
      });
        urlName.value = ''; //urlName is the ID of  input box - Angular rocks!
      urlLink.value = ''; //urlName is the ID of  input box - Angular rocks!
    }

}

I get this error when they are empty:

Error: $scope.mvName is undefined

Daniel Beck · Accepted Answer · 2016-01-27 14:29:56Z

1

The problem isn't anything to do with Angular: .trim() doesn't work against undefined values. Check to see if the variable is defined before trying to trim it, for example:

var mvName = ($scope.mvName) ? $scope.mvName.trim() : '' ;

answered Jan 27, 2016 at 14:29

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

Comments

vamshi krishna kurella · Accepted Answer · 2016-01-27 14:38:33Z

1

You should initialize $scope.mvName in your controller! As it is empty, you are getting an error at line var mvName = $scope.mvName.trim();

EDIT

<a href="javascript:" ng-click="(!mvName && !mvUrl) ? saveToList($event) : ''" class="btn btn-block post">Post</a>

edited Jan 27, 2016 at 14:38

answered Jan 27, 2016 at 14:24

vamshi krishna kurella

3321 silver badge10 bronze badges

1 Comment

vamshi krishna kurella Over a year ago

whoever given downvote probably don't know any angularJS OR didn't understand the question! :(

Ильяс Гарифуллин · Accepted Answer · 2016-01-27 14:24:27Z

0

You can add ng-disabled directive to your a tag. Something like this:

<a href ng-disabled="!mvName || !mvUrl" ng-click="saveToList($event)" class="btn btn-block post">Post</a>

or check that vars in your js:

$scope.saveToList = function(event) {
   if(!$scope.mvName || !$scope.mvUrl)
      return;

    var mvName = $scope.mvName.trim();
    var mvUrl = $scope.mvUrl.trim();
...

answered Jan 27, 2016 at 14:24

Ильяс Гарифуллин

3781 silver badge10 bronze badges

Comments

yeouuu · Accepted Answer · 2016-01-27 14:25:45Z

0

You could do it like this:

<div class="col-xs-5">
  <label for="exampleInputPassword1">Enter a Title/Description</label>
    <input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" />
</div>
<div class="col-xs-5">
    <label for="exampleInputPassword1">Enter a URL</label>
    <input type="text" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" />
</div>
<div class="col-xs-2">
  <a href="javascript:" 
    ng-click="(mvName != '' && mvUrl != '') && saveToList($event)" class="btn btn-block post">Post</a>
</div>

Or use ng-disabled="mvName === '' && mvUrl === ''"

Other options would be to not render the button: ng-if or ng-show.

answered Jan 27, 2016 at 14:25

yeouuu

1,9233 gold badges16 silver badges32 bronze badges

2 Comments

pavgra Over a year ago

Why not to do ng-click="mvName && mvUrl && saveToList($event)" instead of ng-click="(mvName != '' && mvUrl != '') && saveToList($event)"?

yeouuu Over a year ago

Also possible I suppose. I prefer more explicit code/checks in javascript.

pecey · Accepted Answer · 2016-01-27 14:26:33Z

0

How about performing a simple check to see if the fields are empty or not, before you perform any comparisons using the value. That should solve the issue I believe.

answered Jan 27, 2016 at 14:26

pecey

6915 silver badges14 bronze badges

Comments

user3574453 · Accepted Answer · 2016-01-27 14:38:00Z

0

    <form name="myForm">
      <div class="col-xs-5">
        <label for="exampleInputPassword1">Enter a Title/Description</label>
        <input type="text" id="urlName" required class="form-control" placeholder=""  ng-model="mvName" />
      </div>
      <div class="col-xs-5">
        <label for="exampleInputPassword1">Enter a URL</label>
        <input type="text" id="urlLink" required class="form-control" placeholder=""  ng-model="mvUrl" />
      </div>
      <div class="col-xs-2">
        <a href="javascript:" ng-enabled="myForm.$valid" ng-click="saveToList($event)" class="btn btn-block post">Post</a>
      </div>    
    </form>

Try using the angular validation.

answered Jan 27, 2016 at 14:38

user3574453

1

Collectives™ on Stack Overflow

only execute function with ng-click if input fields are not empty

6 Answers 6

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related