2017-02-09 52 views
5

Açısal 2 şablon tahrikli form ile ilgili bir sorum var. Bu formdan birini oluşturdum ve bir form grubundaki bir girdinin geçersiz olması durumunda kullanıcıya bir uyarı ekranı verebilmeyi istiyorum. ÖrneğinAçısal 2 şablon tahrikli form grubu doğrulaması

, en aşağıdaki formu var diyelim:

<form class="form" #f="ngForm" (submit)="submit()"> 
    <div class="form-group"> 
     <input type="text" name="firstName" required [(ngModel)]="user.firstName"> 
     <input type="text" name="lastName" required [(ngModel)]="user.lastName"> 
    </div> 
    <div class="form-group"> 
     <input type="text name="address" required [(ngModel)]="user.address"> 
    </div> 
    <button type="submit" [disabled]="!f.valid">Submit</button> 
</form> 


Değişmek için tüm girişini içeren form grubu "firstName" ve girdi "lastName" istiyorum firstName ya eğer ve/veya lastName geçersiz. Ben böyle bir şey yapabileceğini biliyorum: Bu olacak

<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid"> 
    <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> 
    <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> 
</div> 


gayet güzel çalışıyor. Fakat buradaki zor kısım: Bu örnekte sadece basit bir doğrulama kuralı olan iki girdim var, bu yüzden kontrol edilmesi ve okunması kolay. Ama bir form grubunu kontrol etmek için 10 girdim varsa ne olur? Her girdinin geçerliliğini el ile kontrol etmek zorunda kalmak istemiyorum.

<form class="form" #f="ngForm" (submit)="submit()"> 
    <form #subForm="ngForm" [class.has-error]="!subForm.valid"> 
     <input type="text" name="firstName" required [(ngModel)]="user.firstName"> 
     <input type="text" name="lastName" required [(ngModel)]="user.lastName"> 
    </form> 
    <div class="form-group"> 
     <input type="text name="address" required [(ngModel)]="user.address"> 
    </div> 
    <button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button> 
</form> 
İşte


Ben göstermek için oluşturulan bir plunker geçerli:: form validation example

Ama oldukça çirkin buluyorum buldum çözümün

Bir ilk birinin içinde bir alt form oluşturmaktır ve ben herhangi bir sorun olup olmadığını öğrenmek için iki formu kontrol etmek zor. Sonunda sorum şu: Bir kerede birden çok girişi doğrulayabilmek için bir açısal 2 ngForm olarak bir div ayarlayabilir miyim? Temel olarak, bu tür bir doğrulamayı bir alt form oluşturmaktan daha iyi bir yol var mı? Örneğin Bunun gibi bir şey:

<div class="form-group" #names [class.has-error]="!names.valid"> 
    <input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel"> 
    <input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel"> 
</div> 


Not: Bir işlevini kullanarak biliyorum başka bir çözüm ama aynı engelleri vardır: it can geçerlilik kuralı bağlı olarak manuel her girişleri kontrol etmek zorunda oldukça zor, artı reaktif olanlar yerine şablon tahrikli formunu kullanmanın avantajlarından birini kaybediyorsunuz.

+0

Bir plunker gerçekten yararlı olacaktır. –

+0

Sadece ne hakkında konuştuğumu göstermek için bir plunker ekledim, umarım yardımcı olur :) – Orodan

+0

Bilgi için, 'form' öğesi başka bir formda barındırılır [form geçersiz HTML ve XHTML] (https://stackoverflow.com/ sorular/555928/is-it-geçerli-için-bir-html-form-içinde-başka-html-form) – Pac0

cevap

5

Evet, bunun için ngModelGroup yönergesini kullanabilirsiniz.

<form class="form" #f="ngForm" novalidate> 

    <div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid"> 
    <input type="text" class="form-control" name="firstName" 
      [(ngModel)]="user.firstName" 
      placeholder="first name" 
      required> 

    <input type="text" class="form-control" name="lastName" 
      [(ngModel)]="user.lastName" 
      placeholder="last name" 
      required> 
    </div> 

    <div class="form-group"> 
    <input type="text" class="form-control" name="address" 
      [(ngModel)]="user.address" 
      placeholder="address" 
      required> 
    </div> 

    <button class="btn btn-primary" [disabled]="!f.valid">Submit</button> 

</form> 
+0

Tam olarak ne arıyordum! Çok teşekkürler :) – Orodan