Zatwierdź formularz kątowy2 na przycisku kliknij

Question

Po przesłaniu formularza za pomocą button type="submit" pojawiają się komunikaty sprawdzania poprawności formularza i wszystko jest w porządku. Jednak jeśli mam przycisk (lub link) z (click)="myhandler()", to sprawdzenia nie pojawiają się.

Jak mogę albo:

• tag element jako wymagające weryfikatorów uruchomić lub
• programowo uruchomić i wyświetlania komunikatów walidacji.

Uwaga: Są to proste sprawdzenia, takie jak wymagane w polach wprowadzania.

Przykładowy kod:

<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

Przycisk z rodzaju przedstawienia wyzwalacze przesyłania formularza automatycznie, chyba trzeba wywołać forma przedstawienia ręcznie:

<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

Umieść swoje click2 przycisk w obrębie znacznika form. Zacznie działać!

<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

Powinieneś trzymać przycisk wyłączony do momentu, aż formularz będzie ważny. Więc w twoim przypadku zmienić element formularza otwierania znacznik, aby utworzyć zmienną do postaci:

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

i wyłączyć przycisk, gdy formularz jest nieprawidłowy

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

Daj mi znać, jeśli to Prace. Ponieważ sam formularz będzie sprawdzany automatycznie i stale w anycase, nie musisz tego wymagać.

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> 

przykładem pracy http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview

Answer 5

warunki umieszczone w [ukryte] Dyrektywa i zmienić złożoną właściwość true na przedstawienia!

<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

Poniżej kod będzie pomóc .. Testowane z Kątowymi 4 najnowszej wersji 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> 

Twoja .TS File

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

    } 

Answer 7

Uwaga: to podejście jest reaktywny formularze.

Użyłem właściwości markAsTouched() do uruchomienia sprawdzania poprawności kliknięcia przycisku.

Załóżmy następujący przycisk znajduje się na zewnątrz w postaci:

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

Teraz w sposobie validateForm jeśli formularz jest nieważny, można ustawić markAsTouched() właściwość dla każdego z pól formularza i kanciasty pokaże wiadomości walidacji.

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

pod warunkiem posiadania sprawdzania wiadomości konfigurację w html jak

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

i masz pole wymagane konfigurację walidacji w grupie postać budowniczego jak

firstName: ['', Validators.required]