在提交 Angular4 时触发表单验证答案

【问题标题】：Trigger form validation on Submit Angular4在提交 Angular4 时触发表单验证
【发布时间】：2018-01-09 21:43:40
【问题描述】：

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

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

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

我试图标记控件并触摸或原始但它不起作用。

有人能帮帮我吗？如果单击提交按钮并且表单有错误，我喜欢显示错误消息。

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

【问题讨论】：

标签： angular validation angular2-forms ionic3 angular-forms

【解决方案1】：

最简单的方法是有一个布尔标志，例如submitted，在您单击提交按钮后将其设置为true，然后在模板中将其添加到*ngIf，例如像这样：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：