Geek Answers Handbook

Angular form equals $ if all inputs are empty, why?

My form is displayed as valid, although all of my input fields are blank. I have a required keyword in the input fields.

<!DOCTYPE html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="/components/angular/angular.min.js"></script> <script type="text/javascript" src="/js/app.js"></script> </head> <body> <main> <div class="container"> <div class="row"> <section ng-controller="LogInController as loginCtrl"> <form name="signUpForm" action="/createuser" method="POST" novalidate> <fieldset> <div class="field input-field"> Email <br /> <input type="email" name="email" required /> </div> <div class="field input-field"> Password <br /> <input type="password" name="password" required /> </div> <div class="field input-field"> Confirm Password <br /> <input type="password" name="confirmation" required /> </div> !! -- Form valid? {{signUpForm.$valid}} -- !! <div class="actions"> <input type="submit" value="Sign Up" /> </div> </fieldset> </form> </section> </div> </div> </main> </body> </html>

Downloading this in your browser search results !! - Is the form valid? true --!! I thought angular knows that the required tag makes an empty field invalid?

+7
angularjs validation forms required
source share
1 answer

You must put ng-model in each field to include the form in each field. If you do not add ng-model and name with a value, your field will never be considered part of your form. And change one thing, create one parent variable, such as form , and add all scope variables to it. as in the controller do $scope.form = {}; and then in the UI add all the ng-model to it like form.email , form.password and form.confirmation .

To verify the form more correctly, remove the action and method attribute from the form and use the ng-submit directive, which will call one of the controller methods. and Do call post from this controller method by checking the form $valid or not.

Markup

 <form name="signUpForm" ng-submit="submit(signUpForm, form)" novalidate> <fieldset> <div class="field input-field"> Email <br /> <input type="email" name="email" ng-model="form.email" required /> </div> <div class="field input-field"> Password <br /> <input type="password" ng-model="form.password" name="password" required /> </div> <div class="field input-field"> Confirm Password <br /> <input type="password" ng-model="form.confirmation" name="confirmation" required /> </div> !! -- Form valid? {{signUpForm.$valid}} -- !! <div class="actions"> <input type="submit" value="Sign Up" /> </div> </fieldset> </form>

controller

 $scope.submit = function(form, formData) { if (form.$valid) { //submit form if it is valid $http.post('/url', { data: formData }) .success(function() { //code here }) .error(function() { }) } else { alert("Please fill all required fields") } }

Hope this cleared your little concept of form, thanks.

+8
source share

More articles:


All Articles