禁用提交按鈕作爲默認狀態，直到所有輸入都填充角js

Question

我試圖禁用提交表單，直到所有字段填充。

我試過在按鈕中添加disable選項，但它不起作用。

這是形式：

<form id="contactForm" name="contactForm" novalidate> 
    <input type="text" name="contactName" id="contactName" placeholder="Nombre" data-ng-model="cu.contactName" ng-model-options="{ updateOn: 'blur' }" required autofocus> 
    <span style="color:red" ng-show="contactForm.contactName.$dirty && contactForm.contactName.$invalid"> 
     <span ng-show="contactForm.contactName.$error.required">El nombre es requerido.</span> 
    </span> 

    <button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button> 
</form> 

現在，當我開始打字，然後刪除一切都在投入，當我嘗試點擊該按鈕被禁用，它就會被禁用，但我要的是該按鈕從開始就被禁用，然後當您填充輸入時，它會被解鎖或取消禁用（如果這是一個字）。

請大家幫忙，謝謝！

Answer 1

我能加入這個$pristine屬性來解決這個問題：

User has not interacted with the field yet.

所以我的按鈕看起來現在這個樣子：

<button class="hvr-bounce-to-right" type="submit" ng-disabled="contactForm.contactName.$dirty && contactForm.contactName.$invalid || contactForm.contactName.$pristine" name="submit-form" ng-click="cu.sendMail()">Enviar mensaje &ensp; <span class="icon flaticon-envelope32"></span></button> 

現在它從一開始就禁用，只啓用本身一旦用戶交互並填充（在這種情況下）contactName輸入。

Answer 2

每個輸入的每個狀態應該反映在範圍/控制器中。視圖中的每個輸入

$scope.myInputs = {}; 

你應該NG-模式：

因此，假如你有這樣的

ng-model = "myInputs.email"; 

然後，用你應該遍歷NG-模糊/ NG-變化$ scope.myInputs對象中的每個屬性查看是否填充了值。只有這樣你才能控制提交的殘疾。

Answer 3

角文檔實際上是對形式的狀態處理相當不錯：

https://docs.angularjs.org/guide/forms

檢查第二到最後一個例子，在那裏他們顯示一條消息，如果電子郵件是無效的。