对角形式提交验证

我做验证的角度如下：对角形式提交验证

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

我怎样才能触发形式验证提交？只有在输入中按下键时才起作用。

来源

2017-09-27 daniel

我将现在只更新了我的答案。我认为这是提交后验证字段的最佳方法。希望这对你有用。 – Chandru

我发现了一个解决方案。我改变：

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

来源

2017-09-27 08:32:08 daniel

我认为这是提交后验证字段的方式。的例子如下：

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

来源

2017-09-27 08:10:16 Chandru

我不想禁用提交按钮。必须有办法在提交 – daniel

更新我的答案时运行验证。我认为这是提交后验证字段的最佳方法。希望这会有用 – Chandru

对角形式提交验证

回答

相关问题