单击按钮时的angular2验证表单

Question

如果我使用button type="submit"表单提交表单验证消息出现,一切都很好.但是,如果我有一个按钮(或链接),(click)="myhandler()"则不会出现验证.

我怎么能:

• 将元素标记为要求验证程序运行,或
• 以编程方式运行并显示验证消息.

注意:这些是输入字段所需的简单验证.

示例代码:

<form (ngSubmit)="save()">                       
  <input required type='text' [(ngModel)]="name">
  <!-- Shows validation messages but still calls save() -->
  <button (click)="save()">Click</button>  
  <!-- Only submits if valid and shows messages -->       
  <button type="submit">Submit</button>         
</form>
<!-- does not even show validation messages, just calls save -->
<button (click)="save()">Click 2</button>  

Answer 1

请注意:此方法适用于被动形式.

我使用markAsTouched()属性在按钮单击上运行验证.

假设以下按钮在表单之外:

<button type="button" (click)="validateForm()">Submit</button>

现在,在validateForm表单中,如果表单无效,您可以markAsTouched()为每个表单控件设置属性,而angular将显示验证消息.

validateForm() {
    if (this.myformGroup.invalid) {
      this.myformGroup.get('firstName').markAsTouched();
      this.myformGroup.get('surname').markAsTouched();
      return;
    }
    // do something else
}

如果您在html中设置验证消息,请参阅

<mat-error *ngIf="myformGroup.get('firstName').hasError('required')">
  first name is required
</mat-error>

并且您需要在表单组构建器中设置字段验证设置

firstName: ['', Validators.required]

Answer 2

带有提交类型的按钮会自动触发表单提交，我想您必须手动触发表单提交：

<form (ngSubmit)="save()" #form="ngForm">

<button (click)="form.onSubmit()">Click 2</button> 

为什么是“ngForm”？指令的 exportAs 属性告诉 Angular 如何将局部变量链接到指令。我们将 name 设置为 ngForm，因为 NgControlName 指令的 exportAs 属性恰好是“ngForm”。

文档