AngularJS - dynamic validation using $valid

Question

I'm using AngularJS to validate a form, and I have this button to submit.

<button type="submit" ng-disabled="btn" ng-click="submit(settings.$valid)"
        class="btn btn-primary">
  Submit
</button>

This button is disabled whenever the form is invalid, but once it's valid, the button is enabled.

So this is my code

$http.get("http://localhost:5000/settings").then(function(response){
    $scope.numberOfRows = response.data.numberOfRows
    console.log($scope.numberOfRows)
    if($scope.numberOfRows==0 && $scope.settings.$valid == false ){
        $scope.btn=true
    }else if($scope.numberOfRows==0 && $scope.settings.$valid == true){
        $scope.btn=false
    }

    if($scope.numberOfRows==1){
        $scope.btn=true
    }

})

My problem is when the numberOfRows = 0 and the form is invalid, I can't submit the form which what I want.

BUT, when I fill my form and it became valid, nothings happend.

Can you help me ?

What do you mean by nothing happened? can you explain in more detail? — Naren Murali
– Naren Murali, Commented Sep 1, 2017 at 20:07
I mean, whenever i fill the form correctly, the button still disabled and I can't submit the form — Anes El Gongi
– Anes El Gongi, Commented Sep 1, 2017 at 20:11
You can debug this just do {{btn}} in the html, and do console.log($scope.numberOfRows, $scope.settings.$valid) inside the function you gave! — Naren Murali
– Naren Murali, Commented Sep 1, 2017 at 20:13
I tried {{btn}} but always true, and for the console.log(), it can't show you another result unless you refresh the page, it means you'll begin always at the same point — Anes El Gongi
– Anes El Gongi, Commented Sep 1, 2017 at 20:16
What you need to do, is give ng-disabled="validate()" for the button and move the if statements inside the validate function, this will calculate continuously, I think that your function is checking the conditions only once. — Naren Murali
– Naren Murali, Commented Sep 1, 2017 at 20:21

Ramin Farajpour · Accepted Answer · 2017-09-02 12:05:17Z

1

$http.get("http://localhost:5000/settings").then(function(response){
    $scope.hasRow= response.data.numberOfRows>0;
    $scope.settings.$valid=$scope.hasRow;
})

and add this code to your html

 <button type="submit" ng-disabled="!settings.$valid" ng-click="submit()"
        class="btn btn-primary">
  Submit
</button>

answered Sep 2, 2017 at 12:05

Ramin Farajpour

4274 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - dynamic validation using $valid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related