對角形式提交驗證

Question

我做驗證的角度如下：

<form #f="ngForm" (ngSubmit)="save(f.value, f.valid)" novalidate > 

    <input type="email" name="txtEmail" id="txtEmail" required 
      [(ngModel)]="model.txtEmail" #txtEmail="ngModel"> 
     <div class="msgerror" *ngIf="txtEmail.invalid && (txtEmail.dirty || txtEmail.touched) ">E-Mail invalid</div> 

    <button type="submit">Submit</button> 

</form> 

我怎樣才能觸發形式驗證提交？只有在輸入中按下鍵時才起作用。

Answer 1

我發現了一個解決方案。我改變：

<div class="msgerror" *ngIf="txtEmail.invalid && (txtEmail.dirty || txtEmail.touched) ">bitte die E-Mail Adresse angeben! </div> 

到

<div [hidden]="txtEmail.valid || (txtEmail.pristine && !f.submitted)" class="text-danger">bitte die E-Mail Adresse angeben! </div> 

Answer 2

我認爲這是提交後驗證字段的方式。的例子如下：

component.html

<form name="editForm" role="form" novalidate (ngSubmit)="save(editForm)" #editForm="ngForm" class="form-horizontal"> 
    <input type="text" class="form-control" [(ngModel)]="model.txtEmail" name="txtEmail" id="txtEmail" required> 
    <div [hidden]="!(editForm.controls.txtEmail?.dirty && editForm.controls.txtEmail?.invalid)"> 
     <small class="form-text text-danger" 
      [hidden]="!editForm.controls.txtEmail?.errors?.required"> 
      This field is required. 
     </small> 
    </div> 
    <button type="submit" type="submit">Save</button> 
</form> 

component.ts

import { NgForm } from '@angular/forms'; 

export class AppComponent { 
    private model: any = {}; 
    private editForm: NgForm; 

    save(form: NgForm) { 
     this.editForm = form; 
     Object.keys(this.editForm.controls).forEach(key => { 
      this.editForm.controls[key].markAsDirty(); 
     }) 
    } 
}