SORU
25 EYLÜL 2012, Salı


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
26 ŞUBAT 2013, Salı


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:

Angular Form Validation

Custom Validation Directives

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:

  1. <script src="angular-messages.js"></script> vardır
  2. Başvuru modülü bildirimi ngMessages:

    var app = angular.module('myApp', ['ngMessages']);
    
  3. 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

Ve bir plunker for the ngMessages example

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jared Busch

    Jared Busch

    25 Mayıs 2011
  • jpmkm1

    jpmkm1

    4 NİSAN 2008
  • Submissions101

    Submissions1

    23 ŞUBAT 2007