提交Angular4上的触发器表单验证

我设计了一个使用Angular和ionic的模板驱动表单，它具有一些自定义（onblur）验证。提交Angular4上的触发器表单验证

现在我喜欢在点击提交按钮时触发表单验证。

如果表单无效，我不想禁用提交按钮。

我试图标记控制和触摸或原始，但它不工作。

可以请一些身体帮助我。如果点击提交按钮并且表单有错误，我喜欢显示错误消息。

<form #form="ngForm" (ngSubmit)="register(form)" novalidate> 
<ion-list> 
    <ion-item> 
     <ion-label floating>First Name</ion-label> 
     <ion-input type="text" name="firstname" [(ngModel)]="model.firstname" #name="ngModel" required maxlength="100" (ionBlur)="validate(name)"></ion-input> 
    </ion-item> 
    <div class="error" *ngIf="errors.firstname"> 
     {{errors.firstname}} 
    </div> 
</ion-list>

register(form){ 
     for (var i in form.controls) { 
     console.log(form.controls[i]); 
     form.controls[i].markAsTouched(); 
     form.controls[i].markAsPristine(); 
     form.controls[i]._touched = true; 
     } 
    }

来源

2017-08-02 Vin05

因此，对于你的模板驱动的形式存在用于验证的一些工作需要。第一件事，我想说的是，你可以添加标签或某种旁边的输入，看起来像这样的错误位的...

<div class="error" *ngIf="form.controls.firstname?.errors | json"> 
     {{form.controls.firstname?.errors | json}} 
    </div>

如果你有一个提交按钮修改它像这样...

<button type="submit" [disabled]="form.invalid">Submit</button>

来源

2017-08-02 16:15:51 MichaelSolati

最简单的方法将有一个布尔标志，如submitted，已设为true你点击提交按钮后，再在模板中，您只需添加到*ngIf，因此，例如是这样的：

<div *ngIf="submitted && name.errors?.required"> 
    Name is requried! 
</div>

来源

2017-08-02 17:11:02 Alex

提交Angular4上的触发器表单验证

回答

相关问题