Disable/Enable Button Through Input Conditions [AngularJS]

Question

I am developing an app in AngularJS.

1. I would like to know how can I disable a button if the input value typed by the user is not a item of the uib-typeahead list (in this case the Array items)? And enable it when it is a item of the array?

2. And also, how can I disable the same button when the user tries to add a item of the Array items through the Add button that was already added? The items are saved in the Array addedItems.

This is the input and button in HTML:

<input type="text" ng-model="search1" uib-typeahead="item for item in items 
    | filter:$viewValue | limitTo:10"/>

<button type="submit" class="btn btn-success" ng-click="action()" 
ng-disabled="(!search1)">Add</button>

This is a sample of the items Array structure:

var items = ["admin1", "admin2", "admin3", "admin4", "admin5"];

The action() function is defined in the controller in JavaScript:

$scope.items = ["admin1", "admin2", "admin3", "admin4", "admin5"];
$scope.search1 = undefined;
$scope.addedItems = [];
$scope.action = function() {
  $scope.addedItems.push($scope.search1);
  }

Thank you *

deividfortuna · Accepted Answer · 2017-06-13 17:24:17Z

1

I'm not sure if I can completely understand what do you want do. Let me try.

$scope.items = ["admin1", "admin2", "admin3", "admin4", "admin5"];
$scope.search1 = undefined;
$scope.addedItems = [];

//this method will help you know if the item exists already in the list
$scope.exists = function(list, item){
    return list.indexOf(item) > -1;
}

$scope.action = function() {
    $scope.addedItems.push($scope.search1);
}

After you can use the method to enable or disable the button like this:

<button type="submit" class="btn btn-success" ng-click="action()" 
ng-disabled="exists(addedItems, search1)">Add</button>

I hope this may help you!

edited Jun 13, 2017 at 17:24

answered Jun 13, 2017 at 17:18

deividfortuna

1294 bronze badges

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

2 Comments

Julia Over a year ago

Thank you * This solved Problem #2. Do you know how to solve Problem #1? (1. I would like to know how can I disable a button if the input value typed by the user is not a item of the uib-typeahead list (in this case the Array items)? And enable it when it is a item of the array?)

Julia Over a year ago

Meanwhile, I did something similar to solve my Problem #2 with a new method "itemList()". HTML Button now with "ng-disabled="exists(addedItems, search1) || itemList(search1, items)""

Will · Accepted Answer · 2017-06-13 17:13:57Z

0

I would like to know how can I disable a button if the input value typed by the user is not a item of the uib-typeahead list (in this case the Array items)? And enable it when it is a item of the array?

In your case ui-select will fit your need.

And also, how can I disable the same button when the user tries to add a item of the Array items through the Add button that was already added? The items are saved in the Array addedItems.

There are couple ways of doing it.
1. Add a ng-change method to your input and inside the method do your unique check. Then bind the unique check result to the ng-disabled in the button.
2. This will be reusable but bit more complicated. Have a custom unique check directive that takes a list and an input. And have the button listen to the error. Something like ng-disabled="form.search1.$unique"

answered Jun 13, 2017 at 17:13

Will

4106 silver badges16 bronze badges

2 Comments

Julia Over a year ago

How "ui-select" can solve my Problem #1? (Problem #2 is already solved)

Will Over a year ago

Since `'ui-select' will only allow item from the list, you don't need to disable the button.

Collectives™ on Stack Overflow

Disable/Enable Button Through Input Conditions [AngularJS]

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related