2

我使用 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;
      }
  }
4

2 回答 2

2

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

<div *ngIf="submitted && name.errors?.required">
  Name is requried!
</div>
于 2017-08-02T17:11:02.607 回答
0

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

  <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-02T16:15:51.883 回答