angular2 onayla formunu tıklatırsanız tıklayın

Question

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.

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> 

Answer 1

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

Answer 2

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> 

Answer 3

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.

Answer 4

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

Answer 5

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 
} 

Answer 6

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) 
    } 

    } 

Answer 7

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]