Angular - 验证按钮,然后单击下一个功能
问题描述:
对Angular非常抱歉,如果以前曾询问过此问题,请致歉。Angular - 验证按钮,然后单击下一个功能
我得到了现场验证与ng-messages
(伟大的教程here如果有人感兴趣)很好地工作。
然而,我读到/学到目前为止只要字段被触摸验证。
<div ng-messages="{ required: !main.o1ToAdd || !main.o2ToAdd }"
ng-if="myForm.o1.$touched || myForm.o2.$touched">
<span ng-message="required">you need to specify at least 2</span>
</div>
和输入
<input name="o1" ng-model="main.o1ToAdd" type="text" placeholder="Yes" required
ng-class="{ 'invalidInputField': myForm.o1.$touched && myForm.o1.$invalid }"/>
但是我真的不希望,如果用户点击一个领域出现的错误。
相反,我有一个帖子按钮 - 所以如果这点击,那么应该在整个表单的所有验证。我不确定的是,我已经在该按钮上有一个ng-click
- 我如何使它首先进行验证,然后如果成功,请继续使用实际的发布功能。 (理想情况下,我不想禁用该按钮,即使它变灰)。
<button class="button" ng-click="home.post()">Post</button>
任何帮助,将不胜感激。
谢谢。
答
可能会帮助你。
angular.module("test", []).controller("TestCtrl", function($scope) {
$scope.onSubmit = false;
$scope.submit = function() {
if(!$scope.theForm.$valid)
$scope.onSubmit = true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="TestCtrl">
<form name="theForm">
<input type="text" required name="foo" ng-model="foo" />
<p ng-show="onSubmit && (theForm.foo.$touched || !theForm.foo.$valid)">error at foo input</p>
<input type="text" required name="bar" ng-model="bar" />
<p ng-show="onSubmit && (theForm.bar.$touched || !theForm.bar.$valid)">error at bar input</p>
<button ng-click="submit()" type="button">Submit</button>
</form>
</div>
不能使用''||'里面NG-messages'。 – developer033