如何禁用“保存”按钮，直到完成所有字段

Question

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

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

Answer 2

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

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