为了简化事情,我编写了一个示例表单来描述我的问题:
<form novalidate name="form">
<input required name="foo" ng-model="my.foo">
</form>
还有一个控制器:
angular.module('sample', []).controller('MainController', function($scope) {
$scope.$watch('form.$valid', function (valid) {
console.log(valid);
});
});
预期结果:
> false
实际结果:
> true
> false
任何人都可以告诉我为什么一开始表格有效然后变得无效(顺便说一下,它应该是什么样的)？
我想设置html输入[数字] 只<input type="number" />允许整数输入(不是浮点数).
基本上,html输入[number]允许'.' 输入浮动输入,我不希望这样.
有没有一种快速的方法可以在AngularJS中完成它？
我不能允许我在以angularjs构建的表单中的未来日期
这是我的HTML:
<div ngCloak ng-app="laurelMoney" ng-controller="myCtrl">
<form name="userForm">
<div class="form-group">
<input type='date' id="trandate" class="form-control" ng-model="trandate" required ng-class="{ 'has-error' : userForm.trandate.$error }" />
<p ng-show="userForm.trandate.$error" class="help-block">Transaction can't be in future</p>
</div>
<a href="#" class="btn btn-primary btn-sm btn-block" ng-click="submitForm()" type="submit">Add Transaction</a>
</form>
我的javascript是Ñ
angular.module('laurelMoney', [])
.controller('myCtrl', function($scope) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) …我正在尝试使用带有角度验证（ng-required）的剑道数字文本框，但是我无法让它工作。此元素上的 ng-required 属性对表单验证状态没有影响。
根据我的理解，这不起作用的原因是因为剑道数字文本框使用 k-ng-model 来存储它的值，而角度验证仅适用于 ng-model。
有没有其他人看到过这个问题，有什么解决方法吗？
我创建了动态表单,并ng-required动态地将属性添加到我的控件中.但现在它不起作用.
这是我的JS:
var app = angular.module('birthdayToDo', []);
app.controller('main', function($scope){
$scope.Control={};
$scope.Attributes =[
{
"Name":"FirstName",
"Required":true
},
{
"Name":"LastName",
"Required":false
},
{
"Name":"Email",
"Required":true
},
{
"Name":"Age",
"Required":false
}];
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
alert($scope.Control[1]); // to check correct index
}else{
return;
}
};
});
我的HTML:
<html>
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script src="app.js"></script>
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<form name="userForm" …html javascript angularjs angularjs-ng-model angularjs-validation
尝试为我的表单中的复选框添加表单验证器,以防它未经检查表单将具有ng-invalid.
<li class="terms_checkbox"><input type="checkbox" id="checkbox_terms" name="terms" /><label for="checkbox_terms"></label></li>
<li class="accept">I have read and accept the terms and conditions</li>
ng-invalid如果没有检查,可以触发添加到表单的任何建议,反之亦然.
我有几个字段,我想动态复制.我正在使用ng-reapt来完成这项工作.但是,验证消息不起作用.这是我得到的:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<label>Number of Workers</label>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<form name='frm' action='/workers/add' method='POST'>
<div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}}
<div>
<label>First Name</label>
<input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
<span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)">
<small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small>
<small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small> …angularjs ng-repeat angularjs-ng-repeat angularjs-validation
我在div中有一个带有ng-if条件的表单.最初表格已关闭.单击按钮,将显示表单.但在提交表格时,我收到了Cannot read property '$valid' of undefined错误.如果我将ng-if更改为ng-show,它将完美无缺.但我必须使用ng-if.我找不到错误的原因.还有一件事,在获取错误时,我也将表单对象变为null.如果有人知道答案,我们将不胜感激.
这是我的代码
HTML
<div id="addCommentDiv" ng-if="showAddCommentForm == true">
<form id="formAddComment" name="formAddComment" novalidate>
<textarea id="taAddComment" name="taAddComment" placeholder="Add a comment.." ng-model="new_comment" ng-maxlength="1000" ng-required="true"></textarea>
<button type="button" ng-click="addComment()" ng-disabled="addCommentDisabled">Ok</button>
</form>
</div>
JS
$scope.addCommentDisabled = false;
$scope.addComment = function () {
if ($scope.formAddComment.$valid) {
console.log('valid');
}
}
我在使用AngularJS表单验证时遇到问题.下面是一个简单的双字段表单,唯一的要求是每个字段的数据都是必需的,其中一个是"电子邮件"类型.
麻烦的是,不管是什么,我把作为价值或者两个领域的,角的.$有效总是返回真值和$无效返回的错误值.它可以是空字段,有效/无效的电子邮件地址,也可以是我选择的字符串.结果是一样的.
因此,提交按钮永远不会被禁用,因为我正在使用
ng-disabled="FormLogin.$invalid"
但是,如果我使用控制器中的变量,则会禁用提交按钮
ng-disabled="disableSubmit"
这表明Angular正在工作,但我还没有在表单控件中正确设置指令.请注意,ng-model指令似乎正确应用.
我已经尝试了很多不同的代码变体,有些非常绝望,无济于事.关于同一主题还有其他SO问题,但我没有找到任何适用的问题.你可能有任何建议会很棒.谢谢.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl" align="center" style="width:400px;padding: 10px 10px 10px 10px;">
<table class="table table-stripe"><form name="FormLogin" ng-submit="submitForm(FormLogin.$valid)" novalidate>
<tr>
<td>User:</td>
<td>
<input type="email" name="email" class="form-control" ng-model="email" required />
</td>
</tr>
<tr>
<td>Pwd:</td>
<td><input type="password" name="password" class="form-control" ng-model="password" required /></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit" class="form-control" style="width:200px;" ng-disabled="FormLogin.$invalid">Log In</button>
</td>
</tr></form>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) …