AngularJS - Attach Alert Popup to Empty Input

Question

I'm trying to configure my app to show an alert when the user tries to submit a form with an empty input box, but can't get it working even though I've a confirmation popup elsewhere in the same application.

Any ideas why this code might not be working?

Codepen: http://codepen.io/anon/pen/VpjgJJ.

JS:

$scope.addTask = function() {
        if ($scope.taskName.length == "") {
            $scope.showAlert = function(ev) {
                $mdDialog.show(
                    $mdDialog.alert()
                        .parent(angular.element(document.querySelector('#popupContainer')))
                        .clickOutsideToClose(true)
                        .title('Error')
                        .textContent('You must enter a task name')
                        .ok('Close')
                        .targetEvent(ev)
                )
            }
        }

HTML:

<form class="md-padding">

  <div layout-gt-sm="row">

  <md-input-container class="md-block" flex-gt-sm>

    <label>Add New Task</label>

    <input type="text" ng-model="taskName" size="50">

  </md-input-container>

</div>

<md-button ng-click="addTask()" class="md-raised md-primary">Add</span></md-button>

I'm trying to configure it to use the alert message, which wouldn't automatically appear — user7138187
– user7138187, Commented Mar 5, 2017 at 18:06

lin · Accepted Answer · 2017-03-05 18:10:12Z

1

I updated your demo and made it work. Please check this working demo. You had a couple of problems in your code: e.g. try to load unkown ressources, use of undefined variables and wrong operations like $scope.taskName.length == "". Finaly your code works:

if (angular.isUndefined($scope.taskName) || $scope.taskName.length === 0) {

    var alert =  $mdDialog.alert()
        .parent(angular.element(document.querySelector('#popupContainer')))
        .clickOutsideToClose(true)
        .title('Error')
        .textContent('You must enter a task name')
        .ok('Close');

    $mdDialog.show( alert )
        .finally(function() {
            alert = undefined;
        });
}

edited Mar 5, 2017 at 18:10

answered Mar 5, 2017 at 18:04

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

Comments

Alex Paramonov · Accepted Answer · 2017-03-05 18:05:02Z

0

The reason why your code is not working is because in this line:

$scope.taskName.length == ""

taskName variable in your scope is never initialized (even with an empty value) if that field was not modified by user.

Some recommendations:

Create a task object in your $scope:

$scope.task = {}

Change your input declaration to <input type="text" ng-model="task.name" size="50">
$scope.taskName.length == "" looks weird, use $scope.taskName.length === 0

edited Mar 5, 2017 at 18:05

answered Mar 5, 2017 at 17:59

Alex Paramonov

2,7602 gold badges25 silver badges28 bronze badges

Collectives™ on Stack Overflow

AngularJS - Attach Alert Popup to Empty Input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related