单击按钮时的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

下面的代码将帮助您..使用Angular 4测试最新版本4.2.4

<form method="post" #f="ngForm" name="form" novalidate="novalidate" class="form">
   <div class="row">
      <div class="form-group col-sm-12" [ngClass]="{'has-error':!listname.valid && (listname.dirty || listname.touched || f.submitted)}">
         <label for="listname">Name</label>
         <input id="listname" name="listname" type="text" [(ngModel)]="listData.title"
         required="true" placeholder="List Name" #listname="ngModel" class="form-control"/>
      </div>
   </div>
   <div class="row">
      <div class="form-group text-right col-md-12 visible-md visible-lg">
         <button type="button"  name="save"  (click)="f._submitted = true;saveAndPublish=false;saveList(f.valid)" class="btn btn-default">Save
         Save List
         </button>
         <button type="button"  name="saveandpublish" (click)="f._submitted = true;saveAndPublish=true;saveList(f.valid);" class="btn btn-primary">Save
         & Publish  List
         </button>
      </div>
   </div>
</form>

在你的.ts文件中

saveList(isValid: boolean) {
    if (isValid) {
      console.log(this.listData)
    }

  }

Answer 3

您应该禁用该按钮，直到表单有效。因此，在您的情况下，更改表单元素开始标记以为表单创建变量：

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

并在表单无效时禁用该按钮

<button (click)="save()" [disabled]="!myForm.form.valid">Click 2</button>

如果有效，请告诉我。由于表单本身会自动且不断地进行验证，因此您无需调用它。

Answer 4

按钮类型提交触发器表单自动提交，我猜你必须手动触发表单提交：

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

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

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

documentation

Answer 5

将条件放在[hidden]指令中，并在提交时将提交的属性更改为true！

<div [hidden]="email.valid || (email.untouched && !submitted) || !submitted" class="alert callout">
    <span [hidden]="!email.hasError('required')">Required</span>
</div>

onSubmit(){
   this.submitted = true
}

Answer 6

把你的click2按钮放在form标签内。它将开始工作！

<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>     
  <!-- this will work now -->
  <button (click)="save()">Click 2</button>      
</form>

Answer 7

以编程方式检查和禁用使用验证

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
  <div class="col-md-7">
    Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
  </div>
  Form Valid : {{CreateGroup.valid}} 
</form>
<br>
<div class='text-center'>
  <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>

工作范例http://plnkr.co/edit/aoHHw709VeMlP8Qfgnp6?p=preview