如何在所有字段完成之前禁用“保存”按钮[重复]答案

【问题标题】：How to disable "SAVE" button until all fields are completed [duplicate]如何在所有字段完成之前禁用“保存”按钮[重复]
【发布时间】：2019-09-05 20:58:38
【问题描述】：

我有一个获取用户信用卡信息的表单，所有这些都通过电子商务 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>

【问题讨论】：

你在使用响应式表单吗？如果是这样，您可以 ping 响应式表单以了解其状态，即有效或无效，并最终隐藏/显示按钮。或者，如果您不喜欢 ping 响应式表单的想法，您可以在每个 Fields 按键事件上触发一个函数来检测表单字段的状态
您的意思是输入了所有必填字段吗？那么您的代码是正确的，前提是 editForm 是您的 html 中 FormGroup 的名称。 ,您也可以查看editForm.invalid如果有任何必填字段为空则为true
是的，我正在使用响应式表单

标签： html css angular

【解决方案1】：

由于您使用的是响应式表单，因此您需要使用 Validators.required 验证器 (see docs) 将字段设置为必填项。使用验证器设置所有必填字段后，您将观察表单组是否有效。可能看起来像下面这样。

<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>

【讨论】：

如何使按钮颜色发生变化？它似乎不会改变颜色，因为验证不适用于信用卡。
你可以使用(ngClass)="{invalid: editForm.invalid}"angular.io/api/common/NgClass

【解决方案2】：

您要禁用的代码似乎是正确的。

但是，请检查editForm.valid 是否为boolean。如果您有一个简单的布尔值而不是布尔值作为对象的属性，它有助于调试。

【讨论】：