CODEWITHSUNDEEP
angularjs
user1937021
user1937021

Reputation: 10791

hide submit button again after clicking (ng-show - form validation)

I have the following code, which shows the a.btn anchor if both inputs have values and inputURL is a valid URL. Works fine but I want to hide the button again on click, how do I do this, do I reset the form or actually hide the button on click?

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

    </form>

Upvotes: 1

Views: 1237

Answers (3)

Pratap A.K
Pratap A.K

Reputation: 4517

HTML

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

    </form>
    </div>
</body>

controller

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {   

    $scope.saveToList = function() {            
        $scope.mvName = '';
        $scope.mvUrl = '';              
    }

});

Alternative

with scope variable without invalidating form

 <a href="javascript:" ng-click="saveToList($event)" class="btn btn-block post" ng-show="myForm.$valid {{logicalExp}} !formSubmitted">Post</a>

app.controller('formCtrl', function($scope) {   

    $scope.logicalExp = "||";
    $scope.formSubmitted = true;

    $scope.saveToList = function() {            
        $scope.logicalExp = "&&";
          $scope.formSubmitted = true;              
    }
  });

the problem with this is, user needs to invalidate the form by himself by removing entered value then hyperlink will be hidden-ed.

Upvotes: 0

GHB
GHB

Reputation: 947

you can do something like this:

define another $scope.someToggle variable, and assign it true, then at the ng-show of the button add it like ng-show="myForm.$valid && someToggle". then at the end (or in callback) of saveToList($event) function, set $scope.someToggle to false.

also you can put this on both inputs: ng-change = "someToggle = true" so whenever they change(after the save button has been clicked) you'd be able to bring it back...

Upvotes: 0

Jeremy
Jeremy

Reputation: 1073

What I've done before is create a scope variable in your controller:

$scope.formSubmitted = false;

Then in your saveToList function set $scope.formSubmitted to true. From here you have a few options. If you're "Post" button is an actual button then you could set the disabled attribute. You could also check if formSubmitted is true inside your saveToList function and if it is true you don't continue. Or you can change your ng-show to be:

ng-show="myForm.$valid && !formSubmitted"

Upvotes: 1

Related Questions