禁用提交按鈕時，表格AngularJS無效

151

<form name="myForm"> 
    <input name="myText" type="text" ng-model="mytext" required /> 
    <button disabled="{{ myForm.$invalid }}">Save</button> 
</form>

正如你可能會看到，該按鈕將被禁用，如果輸入的是空，但它不會更改回啓用時，它包含文字。我怎樣才能使它工作？

來源

2013-03-08 ali

http://www.angulartutorial.net/2016/04/disable-submit-button-until-all.html – Prashobh 2016-04-26 17:35:15

306

您需要使用您的窗體的名稱，以及NG-禁用：Here's a demo on Plunker

<form name="myForm"> 
    <input name="myText" type="text" ng-model="mytext" required /> 
    <button ng-disabled="myForm.$invalid">Save</button> 
</form>

來源

2013-03-08 17:43:05

對不起，我現在使用它。然而，即使當文本框包含文本時它仍然被禁用 – ali 2013-03-08 17:44:19

是的，我錯過了一些東西。我已經更新了它。 – 2013-03-08 17:48:52

謝謝。這是做 – ali 2013-03-08 17:57:46

要添加到這個答案。我剛剛發現，它也將打破，如果你在你的表單名稱（角1.3）使用連字符：

因此這將不工作：

<form name="my-form"> 
    <input name="myText" type="text" ng-model="mytext" required /> 
    <button ng-disabled="my-form.$invalid">Save</button> 
</form>

來源

2014-10-28 21:38:44 wvdz

是的，對於任何AngularJS表單驗證，表單名稱應該是駱駝大小寫。 – dubilla 2014-11-04 19:02:39

作爲一個經驗法則，所有類似於表達式的js將識別camelcase表單中的對象，而短劃線用於html，類似於語法 – ecoologic 2014-12-15 02:03:25

因此，如果表單是formset的成員並因此需要具有名稱w /連字符（如「my_formset_name-0」）？ – trubliphone 2015-10-07 04:08:03

獲選是正確的，但有人和我一樣，在向服務器端發送請求時可能會出現異步驗證問題 - 在給定的請求處理期間，按鈕將不會被禁用，因此按鈕將閃爍，這對用戶來說看起來很奇怪。

作廢這一點，你只需要處理$未決形式的狀態：

<form name="myForm"> 
    <input name="myText" type="text" ng-model="mytext" required /> 
    <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button> 
</form>

來源

2015-05-23 17:09:26

非常感謝您使用異步驗證解決方案！ – 2016-03-08 07:32:23

我們可以創建一個簡單的指令，並禁用按鈕，直到所有的必填字段被填充。

angular.module('sampleapp').directive('disableBtn', 
function() { 
return { 
    restrict : 'A', 
    link : function(scope, element, attrs) { 
    var $el = $(element); 
    var submitBtn = $el.find('button[type="submit"]'); 
    var _name = attrs.name; 
    scope.$watch(_name + '.$valid', function(val) { 
    if (val) { 
    submitBtn.removeAttr('disabled'); 
    } else { 
    submitBtn.attr('disabled', 'disabled'); 
    } 
    }); 
    } 
}; 
} 
);

For More Info click here

來源

2016-04-26 17:38:06 Prashobh

您的解決方法適合我，只需稍作調整即可。謝謝 – Tatipaka 2016-06-09 13:00:04

爲什麼要在angular 1.x中有原生指令'ng-disabled'並且在角度2 | 4.x中有'[disabled]'這樣比這更好的測試呢？其次，爲什麼有一個限定爲表單的指令禁用嵌套按鈕，這是超級特定的。一個想法不明的解決方案IMO。 – 2017-11-01 07:27:01

上面是一個示例指令，原始有許多方案，如嵌套複選框等，我不想通過添加在每一個形式凌亂我的HTML代碼，而是這個指令將照顧所有的事情。 – Prashobh 2017-11-01 11:10:44

<form name="myForm"> 
 
     <input name="myText" type="text" ng-model="mytext" required/> 
 
     <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button> 
 
</form>

如果你想如果你使用的是無形式，你可以用它來有點更嚴格

來源

2016-11-14 02:14:51

：

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

來源

2017-09-01 12:31:16 Nelul

禁用提交按鈕時，表格AngularJS無效

回答

相關問題