Nasıl Açısal js bir form için özel doğrulama eklemek için?
required
özniteliklerini ekleyerek giriş alanları ve doğrulama Kur ile bir form ve tür var. Ama bazı alanlar için bazı ekstra doğrulama yapmak istiyorum. Nasıl "FormController
denetleyen" için doğrulama? dokunun ki
Özel doğrulama gibi bir şey olabilir "eğer bu 3 alanlar doldurulduktan sonra bu alan gereklidir ve belirli bir şekilde biçimlendirilmiş olması gerekiyor".
FormController.$setValidity
yöntemi var ama ben daha çok bunu kullanmak için bir genel API gibi görünmüyor. Özel bir yönerge oluşturma ve NgModelController
kullanarak başka bir seçenek gibi görünüyor, ama aslında beni istemiyorum her özel doğrulama kuralı için bir emir oluşturmak için gerektirecektir.
Aslında, işaretleme alanı denetleyicisi olarak geçersiz (olsa da tutulması FormController
sync) olabilir şey, ihtiyacım olan basit bir senaryo işi yapmak için, ama bilmiyorum, hiç bilmiyorum.
CEVAP
Edit: ngMessages (İngilizce) ile ilgili bilgiler eklendi = 1.3.X) aşağıda.
Standart doğrulama iletileri (1.0.form X ve üzeri)
Bu "eğer, şu anda, herkes oradan geliyor. bu başka bir cevabı eklemek istiyorum" Açısal Form Doğrulama, Google üst sonuçlarından biri olduğundan
FormController bir yöntem var.$setValidity ama ben daha çok bunu kullanmak için bir genel API gibi görünmüyor.
Bu "halk" yok. Bunu kullanın. Bunun için var. Olması gerekiyordu yürümüyorsa, Açısal geliştiriciler bir kapatma olarak özelleştirilen olurdu.
Eğer Açısal-UI diğer cevap önerdiği gibi kullanmak istiyor musun diye özel doğrulama yapmak için, sadece kendi doğrulama Direktifi dönebilirsiniz.
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
var blacklist = attr.blacklist.split(',');
//For DOM -> model validation
ngModel.$parsers.unshift(function(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
});
//For model -> DOM validation
ngModel.$formatters.unshift(function(value) {
ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
return value;
});
}
};
});
Ve burada bazı örnek kullanım:
<form name="myForm" ng-submit="doSomething()">
<input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
<span ng-show="myForm.fruitName.$error.blacklist">
The phrase "{{data.fruitName}}" is blacklisted</span>
<span ng-show="myForm.fruitName.$error.required">required</span>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
Not: 1.2.X muhtemelen tercih ng-show
ng-if
yukarıda yerine
Burada plunker link zorunlu
Ayrıca, biraz daha ayrıntılı anlatır sadece bu konu hakkında birkaç blog girişleri yazdım:
Edit: 1.3 kullanarak ngMessages.X
Şimdi ngMessages yerine modül ngShow hata mesajlarını göstermek için kullanabilirsiniz. Aslında bir şey ile çalışacak, bir hata iletisi olmak zorunda değil, ama burada temel:
<script src="angular-messages.js"></script>
vardırBaşvuru modülü bildirimi
ngMessages
:var app = angular.module('myApp', ['ngMessages']);
Ekleyin uygun işaretleme:
<form name="personForm"> <input type="email" name="email" ng-model="person.email" required/> <div ng-messages="personForm.email.$error"> <div ng-message="required">required</div> <div ng-message="email">invalid email</div> </div> </form>
Yukarıdaki biçimlendirme, ng-message="personForm.email.$error"
temelde ng-message
çocuk direktifleri için bir bağlam belirtir. ng-message="required"
ng-message="email"
bağlam özelliklerini izlemek için belirtin.En önemlisi, onlar da onları kontrol etmek için bir düzen belirleyin. İlki "kazanır ve o mesajı ve diğerleri. hiçbiri gösterecektir truthy listede bulur
düzenli ifade doğrulama için bir kural...
Nasıl her XML çağırmak için özel bir b...
Nasıl Kaldır (MSI) sadece olur WiX öze...
Nasıl bir WordPress kullanmak yoluyla ...
Özel doğrulama açısal yönergesi test i...