angular Form 表单校验，点击外部按钮触发校验方法

最新推荐文章于 2024-01-25 17:37:55 发布

Can2Code

最新推荐文章于 2024-01-25 17:37:55 发布

阅读量865

点赞数

文章标签： angular.js 前端 html

本文链接：https://blog.youkuaiyun.com/qq_36722315/article/details/130931252

版权

文章介绍了如何在Angular应用中，通过外部按钮触发form表单的内置校验机制。关键在于利用一个隐藏的submit按钮，当点击外部提交按钮时，模拟点击该隐藏按钮以执行表单验证。这种方法确保了无论按钮位置如何，都能进行必要的数据验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在form 表单里面的按钮点击后一定可以触发表单校验

如过写在外部的提交按钮想触发表单校验，则可以设置一个隐藏的submit按钮，点击提交时获取元素并点击事件

 <form [formGroup]="dataForm" (onSubmit)="addNew()">
        <mat-form-field class="self-field-item">
          <input autocomplete="off" matInput maxlength="50" autofocus required 
            [formControl]="UserNameControl" [placeholder]="'请输入用户姓名'" />
          <mat-error *ngIf="UserNameControl.invalid">
            <span *ngIf="UserNameControl.errors?.required">请输入用户姓名</span>
          </mat-error>
        </mat-form-field>
        <br />
<button type="submit" id="submit" style="display: none;"></button>
</form>
<button (click)="checkForm()">提交</button>