时间戳

首页 > 解决方案 > 如何在所有字段完成之前禁用“保存”按钮

html - 如何在所有字段完成之前禁用“保存”按钮

问题描述

我有一个获取用户信用卡信息的表单，所有这些都由电子商务 API 验证。我在表格中有其他字段，例如姓名，地址。我能够验证姓名和地址，但由于信用卡信息的输入正在由后端验证。他们是我在完成所有字段之前禁用按钮的一种方式吗？

<div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
     <button class="saves" (click)="onSave()" aria-label="Save user info" 
     [disabled]="!editForm.valid">Save</button>
</div>

标签： htmlcssangular

解决方案

由于您使用的是响应式表单，因此您需要使用Validators.required验证器将您的字段设置为必填（请参阅文档）。一旦您使用验证器设置了所有必填字段，您将观察表单组是否有效。可能看起来像下面这样。

<form [formGroup]="formGroup">
   ...
   <div class="medium-6 columns" *ngIf="!isLoading else updateLoading">
      <button class="saves" (click)="onSave()" aria-label="Save user info" 
      [disabled]="editForm.invalid">Save</button>
   </div>
</form>

推荐阅读