Angular - 驗證按鈕，然後單擊下一個功能

Question

對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> 

任何幫助，將不勝感激。

謝謝。

Answer 1

可能會幫助你。

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>