2016-04-12 20 views
8

button type="submit" numaralı formu kullanarak form gönderirseniz form doğrulama mesajları görünür ve her şey yolundadır. Ancak, (click)="myhandler()" ile bir düğmem (veya bağlantı) varsa, onaylar görünmez.angular2 onayla formunu tıklatırsanız tıklayın

nasıl yapabilirim ya:

  • etiketi çalıştırmak için doğrulayıcılarını gerektiren olarak eleman, ya
  • programlama yoluyla çalıştırmak ve Doğrulama mesajlarını göstermektedir.

Not: Bunlar, giriş alanlarında gerekenler gibi basit doğrulamalardır.

Örnek Kod: türüyle

<form (ngSubmit)="save()">      
    <input required type='text' [(ngModel)]="name"> 
    <!-- Shows validation messages but still calls save() --> 
    <button (click)="save()">Click</button> 
    <!-- Only submits if valid and shows messages -->  
    <button type="submit">Submit</button>   
</form> 
<!-- does not even show validation messages, just calls save --> 
<button (click)="save()">Click 2</button> 
+0

veriniz kodu gibi formu grup oluşturucudaki alan geçerlilik kurulumunu gerektirmiştir. Bence sorun senin kodunla. – micronyks

+0

onun düğme tipi 'submit' veya basit bir düğme, doğrulama ile ilgili, kod çalışması sağlamak size yardımcı olacaktır –

+0

ans kısa umut yardımcı olur, form.validate dayalı gizli bir div eklemek yani '

{{warningMessage}}
' –

cevap

0

Düğme tetikleyiciler otomatik form gönderme göndermek, sana formu elle göndermek tetiklemek gerekiyor sanırım:

<form (ngSubmit)="save()" #form="ngForm"> 

<button (click)="form.onSubmit()">Click 2</button> 

Why "ngForm"? A directive's exportAs property tells Angular how to link local variable to the directive. We set name to ngForm because the NgControlName directive's exportAs property happens to be "ngForm".

documentation

+0

Denedim

ve düğmesinde '
+0

nope, bu hata veriyor: 'onSubmit bir fonksiyon değil' – gatapia

+0

'# form =" ngForm "' ekleyelim. – kemsky

0

koy senin form etiketi içinde click2 düğmesi. Çalışmaya başlayacak!

<form (ngSubmit)="save()">      
    <input required type='text' [(ngModel)]="name"> 
    <!-- Shows validation messages but still calls save() --> 
    <button (click)="save()">Click</button> 
    <!-- Only submits if valid and shows messages -->  
    <button type="submit">Submit</button>  
    <!-- this will work now --> 
    <button (click)="save()">Click 2</button>  
</form> 
+0

Dışarısı amaca göre içeri alıyorum, ancak içeride taşımaya devam et (yine de ilk düğmede gösterildiği gibi) – gatapia

+1

FYI ... Örneğinizde, doğrulama için açısal2'yi kullanmıyorsunuz. Bunu yapmanın yolu, doğrulama için HTML5 kullanıyor. Angular2 ile doğrulamak için 'ngFormModel, formBuilder, ngControl' direktifleri ile uğraşmak zorundasınız. Bu size yardımcı olabilir - http://plnkr.co/edit/oP0A8vWFHsZ4y5A7uUQP?p=preview. – micronyks

+0

Bu yanlış gittiğim yer olabilir, belki de 'güzel pop up' mesajları HTML5 !! Teşekkürler, en azından araştırma için bir cadde – gatapia

1

Form geçerli olana kadar düğmeyi devre dışı bırakmalısınız.

<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>

bana eğer bilsin formu geçerli değil düğmeyi

<form (ngSubmit)="save()" #myForm="ngForm"> 

ve devre dışı bırakın: senin durumunda böyle form için bir değişken oluşturmak için etiket açarak, form elemanını değiştirmek Eserleri. Formun kendiliğinden ve sürekli olarak her durumda doğrulanacağı için, yapılması için aramanız gerekmez.

+2

Bu umut verici görünüyor ama düğmeyi devre dışı bırakmak istemiyorum, güzel pop up mesajları tetiklemek istiyorum. NgForm bir runValidatorsAndSubmit veya bir şey var mı? Bunu yapmak ister: '

+0

gerçekten ne gatapaia aked için değil ... – keuleJ

0

Programatically check and disable using validation

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup"> 
    <div class="col-md-7"> 
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'> 
    </div> 
    Form Valid : {{CreateGroup.valid}} 
</form> 
<br> 
<div class='text-center'> 
    <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button> 
</div> 

yılında http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview

+1

düğme devre dışı bırakılması sorunu güzel pop up mesajları göstermiyor olmasıdır. – gatapia

+0

göstergede yanlış değeri göstermek ister misiniz? –

+1

Eğer gerekli bir alan boşsa ve formu güzel bir şekilde gönderirseniz, 'Lütfen bu alanı doldurunuz' açılır penceresi belirir. Bunu sevdim. – gatapia

1

satım koşulları örnek çalışma [gizli] yönergesi ve teslim true sunulan özelliğini değiştirmek! Bu yaklaşım reaktif içindir: Kod Aşağıda

<div [hidden]="email.valid || (email.untouched && !submitted) || !submitted" class="alert callout"> 
    <span [hidden]="!email.hasError('required')">Required</span> 
</div> 

onSubmit(){ 
    this.submitted = true 
} 
+0

Lütfen daha fazla bilgi ile düzenleyin. Sadece kod ve "bunu dene" yanıtları önerilmez, çünkü bunlar aranabilir içerik içermez ve neden birinin "bunu denemesi" gerektiğini açıklamamaktadır. Bilgi için bir kaynak olmak için burada çaba sarf ediyoruz. –

+0

'onSubmit()', form geçersizse çağrılmaz. –

0

Kişisel ts içinde 4.2.4

<form method="post" #f="ngForm" name="form" novalidate="novalidate" class="form"> 
    <div class="row"> 
     <div class="form-group col-sm-12" [ngClass]="{'has-error':!listname.valid && (listname.dirty || listname.touched || f.submitted)}"> 
     <label for="listname">Name</label> 
     <input id="listname" name="listname" type="text" [(ngModel)]="listData.title" 
     required="true" placeholder="List Name" #listname="ngModel" class="form-control"/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group text-right col-md-12 visible-md visible-lg"> 
     <button type="button" name="save" (click)="f._submitted = true;saveAndPublish=false;saveList(f.valid)" class="btn btn-default">Save 
     Save List 
     </button> 
     <button type="button" name="saveandpublish" (click)="f._submitted = true;saveAndPublish=true;saveList(f.valid);" class="btn btn-primary">Save 
     & Publish List 
     </button> 
     </div> 
    </div> 
</form> 

saveList(isValid: boolean) { 
    if (isValid) { 
     console.log(this.listData) 
    } 

    } 
0

unutmayın Dosya Sen .. Eğik 4 Son sürümü ile test edilmiştir yardımcı olacaktır formlar.

Düğmeleri tıklatarak doğrulamaları çalıştırmak için markAsTouched() özelliğini kullandım.

aşağıdaki butonu formu dışında varsayalım:

<button type="button" (click)="validateForm()">Submit</button> 

Şimdi, form geçersizse validateForm yönteminde, form denetimleri her biri için markAsTouched() özelliği ayarlayabilirsiniz ve açısal Doğrulama mesajlarını gösterecektir.

validateForm() { 
    if (this.myformGroup.invalid) { 
     this.myformGroup.get('firstName').markAsTouched(); 
     this.myformGroup.get('surname').markAsTouched(); 
     return; 
    } 
    // do something else 
} 

sağlanan sen

<mat-error *ngIf="myformGroup.get('firstName').hasError('required')"> 
    first name is required 
</mat-error> 

gibi html doğrulama mesajları kurulum varsa ve

firstName: ['', Validators.required]