禁用表单时，响应式表单有效属性返回 false

Question

我有这个简单的表单并用于创建和更新案例，因此对于创建案例，用户将输入数据并基于验证器我将获得form.valid（真，假）。在更新的情况下，我只是从 api 获取数据并将此值设置为表单并使表单禁用；

this.form = fb.group({
  name: ['', Validators.required],
  lastName: ['', Validators.required],
  address: [''],
});

因此，当我禁用表单时，有效值始终为false；

 ngOnInit() {
    this.form.patchValue({
      name: 'name',
      lastName: 'Last Name'
    });

    this.form.disable();
  }

堆叠闪电战示例

Answer 1

这是对的。文档说：

当控件的状态为 VALID 时，它是有效的。

状态文档说：

控件的验证状态。有四种可能的验证状态值：

• VALID：此控件已通过所有验证检查。
• 无效：此控件至少未通过一项验证检查。
• PENDING：此控件正在执行验证检查。
• 禁用：此控件免于验证检查。

您的表单已禁用，因此无效。

Answer 2

如果表单被禁用，Valid 将返回 false，所以我找到了两种方法来解决这个问题

直接检查valid属性我做了一个检查有效性的函数

 isFormValid() : boolean { 
    return this.form.disabled ? true : this.form.valid
  }

模板

<button [disabled]="!isFormValid()" (click)="update()">Update</button>

另一种无需创建 isFormValid 函数的方法

<button [disabled]="!form.valid && form.disabled === false" (click)="update()">Update</button>