Angular form is $valid when all inputs are blank, why?
My form is showing up as valid even though all of my input fields are blank. I have the 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>
Loading this in the browser results in !! -- Form valid? true -- !! I thought angular knows that the required tag makes a blank field invalid?
Answer
You should place ng-model on each field to enable form on each field,
Unless you add ng-model & name with value your field will never considered as part of your form. And do change one thing create one parent variable such as form & add all the scope variables in it. like in controller do $scope.form = {}; & then on UI add all ng-model s to it like form.email, form.password & form.confirmation.
For more better form validation remove action & method attribute from a form & use ng-submit directive which will call one of controller method. & Do call post from that controller method by checking form is $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 has cleared your little concept about form, Thanks.