我需要在页面上显示两个必填字段。我有一个 datePattern 和必填字段检查。
我需要在提交时显示字段是必需的，而不输入字段。如果我输入一些东西，我的 datePattern 就可以正常工作。因为当我显示喜欢时它是必需的
Ng-show = Form.field1.$error.required && Form.field1.$pristine。这会在开始时显示所需的消息，但我希望在提交时使用它，一旦我编辑我的字段 datePattern 就可以了。
我已经尝试过 ng-click=submitted = true。并且 ng-submit=ctrl.submit() 它没有进入控制器..
有人可以帮忙吗...
【问题讨论】：
标签： javascript angularjs forms validation
我是这样解决的
Form.$submitted && form.field1.$error.required && !form.field1.$touched
【讨论】：
<form ng-submit="validateForm()">
<input ng-model="name">
<span ng-show="invalidName">Please fill name field</span>
</form>
controller('MyController', function ($scope){
$scope.validateForm = function(){
if($scope.name){
$scope.invalidName = true;
}
if($scope.invalidName){
//Prevent submit
return false;
}else{
//Handle submit here or do nothing for auto submit of form
}
};
});
【讨论】：
我处理这个问题的方法（不保证这是最好的方法）是在提交函数上我将每个表单字段设置为 $touched，然后对于每个字段，当字段为 $error 和 $touched 时我会显示警告.
HTML
<div ng-app="app" ng-controller="ctrl">
<div ng-form="forms.datesForm">
<input type="text" ng-model="date" name=date required />
<p ng-show="forms.datesForm.date.$touched && forms.datesForm.date.$invalid">Please select a date.</p>
<br />
Your date: {{date}}
<button ng-click="submitForm()">Submit</button>
</div>
<p ng-show="submitted">
Congrats, you submitted successfully!
</p>
</div>
JS
angular.module('app', []);
angular.module('app').controller('ctrl', ['$scope', function ($scope) {
$scope.forms = {};
$scope.submitForm = function() {
if ($scope.forms.datesForm.$invalid) {
setAllFieldsTouched($scope.forms.datesForm);
return;
}
else {
// do whatever submit logic here
$scope.submitted = true;
}
}
var setAllFieldsTouched = function () {
// loop through all the empty required fields
angular.forEach($scope.forms.datesForm.$error.required, function (field) {
// only forms have $submitted properties, not fields
if (field.hasOwnProperty('$submitted')) { // is a form, recur through it
setAllFieldsTouched(field);
}
else { // this is a field
field.$setTouched();
}
});
}
}]);
【讨论】：