在ng-click上觸發表單驗證

Question

我創建了一個Plunker，它顯示一個帶有所需電子郵件字段的簡單表單。驗證在用戶輸入電子郵件時起作用，但在單擊按鈕時有一種觸發驗證的方法。我不想基於表單有效性來禁用按鈕。

Answer 1

現在，您將ng-show綁定到每當用戶輸入時都會更改的數據。而是將其綁定到單擊該按鈕時發生更改的數據。以下是我的看法：

$scope.update = function(user) { 
    $scope.isEmptyEmail = $scope.form.uEmail.$error.required; 
    $scope.isInvalidEmail = $scope.form.uEmail.$error.email; 
}; 

然後將您的數據綁定到這些新值。

<span ng-show="isEmptyEmail">Tell us your email.</span> 
    <span ng-show="isInvalidEmail">This is not a valid email.</span> 

Answer 2

如果我理解正確的話，你有

在HTML：

$scope.update = function(form) { 
    //form.uEmail.$error.email 
    //..etc 
    console.log('update'); 
    }; 

，並繼續驗證

Answer 3

我使用這個：

ng-click="update(form) 

在CTRL

方法yself。到目前爲止，這似乎是工作得很好

控制器：

$scope.update = function() { 
    $('.ng-invalid').addClass('ng-touched'); 
    if ($scope.form.$valid) { 
     /// submit 
    } 
} 

查看：

<ng-form name='form'> 
    <!-- ... --> 
    <button type="button" ng-click='update()'>Submit</button> 
</ng-form> 

Answer 4

如果它只是一個表單驗證，與上述類似，但更簡單一點，更少的代碼是：

<input id="id" type="text" name="inputName" required> 
<span ng-show="isSubmitted && formName.inputName.$error.required">This field is required</span> 
<button id="save" value="Submit" ng-click="formSubmission()">Submit</button> 

和在控制器：

$scope.formSubmission = function() { 
    $scope.isSubmitted = true; 
} 

通過這種方式，它可以與各個領域的工作，你不必編寫代碼爲每一個需要輸入