Angular 当所有输入均为空白时,表单 $valid,为什么?
Angular form is $valid when all inputs are blank, why?
尽管我的所有输入字段都是空白,但我的表单显示为有效。
我在输入字段中有所需的关键字。
<!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>
在浏览器中加载它会导致 !! -- 表格有效吗?真的 - !!
我以为 angular 知道 required 标记会使空白字段无效?
您应该在每个字段上放置 ng-model
以在每个字段上启用表单,
除非您添加 ng-model
& name
值,否则您的字段将永远不会被视为表单的一部分。并改变一件事创建一个父变量,例如 form
并在其中添加所有范围变量。就像在控制器中做 $scope.form = {};
然后在 UI 上添加所有 ng-model
s 就像 form.email
、form.password
和 form.confirmation
。
为了更好的表单验证,从表单中删除 action
和 method
属性并使用 ng-submit
指令,这将调用控制器方法之一。 & 通过检查表单是否为 $valid
来从该控制器方法调用 post。
标记
<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>
控制器
$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")
}
}
希望这已经清除了您对形式的小概念,谢谢。
尽管我的所有输入字段都是空白,但我的表单显示为有效。 我在输入字段中有所需的关键字。
<!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>
在浏览器中加载它会导致 !! -- 表格有效吗?真的 - !! 我以为 angular 知道 required 标记会使空白字段无效?
您应该在每个字段上放置 ng-model
以在每个字段上启用表单,
除非您添加 ng-model
& name
值,否则您的字段将永远不会被视为表单的一部分。并改变一件事创建一个父变量,例如 form
并在其中添加所有范围变量。就像在控制器中做 $scope.form = {};
然后在 UI 上添加所有 ng-model
s 就像 form.email
、form.password
和 form.confirmation
。
为了更好的表单验证,从表单中删除 action
和 method
属性并使用 ng-submit
指令,这将调用控制器方法之一。 & 通过检查表单是否为 $valid
来从该控制器方法调用 post。
标记
<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>
控制器
$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")
}
}
希望这已经清除了您对形式的小概念,谢谢。