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

  • Felice Musique

    Felice Musiq

    22 NİSAN 2014
  • GUN-TIME with Brandon

    GUN-TIME wit

    3 ŞUBAT 2009
  • Hey Nadine

    Hey Nadine

    24 Kasım 2006