SORU
15 Ocak 2013, Salı


Mutabakat Angular.js ve Bootstrap form doğrulama şekillendirme

Bootstrap ile Açısal kullanıyorum. İşte başvuru için: kod

<form name="newUserForm" ng-submit="add()" class="" novalidate>
    <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
    <button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>

Bootstrap input:invalid {.... }; Bu alanı boş olduğunda da tekme şeklinde geçersiz alanlar için stilleri vardır. Şimdi ben de Açısal üzerinden bazı desen eşleştirme. Bu tuhaf durumlar yaratır ":geçersiz" kapalı ".ng-geçersiz" beni yeniden uygulamak için gerektiren, CSS dersleri için bootstrap ".ng-geçersiz" sınıfı.

İki seçenek görüyorum, ama her ikisi ile sorun yaşıyorum

  • Açısal bazı özel code kullanmak yerine "ng-geçerli" (bunun nasıl yapılacağını bilmiyorum).
  • Devre dışı html5 (o da ne "" form etiketi özniteliği yapmalı, ama nedense iş) olamaz novalidate. diye düşündüm doğrulama

Orada Açısal-Bootstrap direktifleri şekillendirme kapağı yok.

CEVAP
19 ŞUBAT 2013, Salı


Kullanım Bootstrap "hata" şekillendirme için sınıf. Daha az kod yazabilirsiniz.

<form name="myForm">
  <div class="control-group" ng-class="{error: myForm.name.$invalid}">
    <label>Name</label>
    <input type="text" name="name" ng-model="project.name" required>
    <span ng-show="myForm.name.$error.required" class="help-inline">
        Required</span>
  </div>
</form>

DÜZENLEME: Diğer cevapları ve açıklamaları işaret olarak sınıf şimdi Bootstrap 3 "hata","". hata

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • After Effects Tutorials w/ Mikey

    After Effect

    24 HAZİRAN 2009
  • Darren Kitchen

    Darren Kitch

    3 EKİM 2011
  • undrmyumbrellaa

    undrmyumbrel

    25 Temmuz 2012