Ben böyle bir form var:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button disabled="{{ myForm.$invalid }}">Save</button>
</form>Gördüğünüz gibi, giriş boşsa düğme devre dışı bırakılır, ancak metin içerdiğinde tekrar etkinleştirilmez. Nasıl çalıştırabilirim?
Yanıtlar:
Formunuzun adını kullanmanız ve ng devre dışı bırakmanız gerekir : İşte Plunker hakkında bir demo
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid">Save</button>
</form><div ng-form="myForm"> ... stuff here .. </div>. Girişlerden bir değer gönderiyorsanız, düğmeye bastığınızda , bir kullanıcının [ENTER] tuşuna basmasına ve formu göndermesine izin vermesinden başka bir neden yoksa, bir etiket kullanmanızı şiddetle tavsiye ederim <form/>. Ancak erişilebilirlik kaygıları gibi şeyler nedeniyle muhtemelen daha iyi uygulama oluşturur.
Bu cevaba eklemek için. Ben sadece form adınızda (Açısal 1.3) bir tire kullanırsanız da yıkılacağını öğrendim:
Bu nedenle değil çalışır:
<form name="my-form">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="my-form.$invalid">Save</button>
</form>myForm.$invalidhala çalışması gerektiğine inanıyorum , bu yüzden sizin durumunuzda, my_formset_name0.$invalidçalışması gerektiğini düşünüyorum .
Seçilen yanıt doğrudur, ancak benim gibi biri, sunucu tarafına istek gönderme ile zaman uyumsuz doğrulama ile ilgili sorunlar yaşayabilir - verilen istek işleme sırasında düğme devre dışı bırakılmaz, bu nedenle düğme yanıp söner, bu da kullanıcılar için oldukça garip görünür.
Bunu geçersiz kılmak için formun $ bekleyen durumunu ele almanız yeterlidir:
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required />
<button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>!myForm.$validBekleyen sorunları da zaman uyumsuz olarak kullanmalısınız . itnext.io/valid-and-invalid-in-angular-forms-61cfa3f2a0cd
Reaktif Formlar kullanıyorsanız bunu kullanabilirsiniz:
<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>(click)ve [disabled]geçerli angularjs kod değildir, ne Reaktif Formlar angularjs çerçevesinin bir parçasıdır. "Eğik bugünün ve yarının açısal adıdır angularjs Açısal tüm v1.x sürümleri için adıdır." Angular.io/guide/ajs-quick-reference
Basit bir yönerge oluşturabilir ve tüm zorunlu alanlar dolana kadar düğmeyi devre dışı bırakabiliriz.
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');
}
});
}
};
}
);ng-disabledaçısal 1.x ve [disabled]açısal 2 | 4.x'te bundan daha iyi test edilen yerel yönergeler olduğunda neden yapasınız ki? İkincisi, neden iç içe yerleştirilmiş bir düğmeyi devre dışı bırakmak için bir forma dahil edilen bir yönerge var, bu çok özel. Kötü düşünülmüş bir çözüm IMO.
<form name="myForm">
<input name="myText" type="text" ng-model="mytext" required/>
<button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>Biraz daha katı olmak istiyorsan