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();
  }

stackblitz example

Answer 1

这是正确的。该文档说：

控件的状态为“有效”时有效。

状态文档显示：

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


有效：此控件已通过所有验证检查。

无效：此控件未通过至少一项验证检查。

待审核：此控件正在执行验证检查。

已禁用：此控件免于验证检查。

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

Answer 2

如果表单被禁用，有效值将返回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>

Answer 3

如果不是所有的表单域都被禁用，那么此时，在这种情况下使用响应表单的最佳解决方法是将这些字段标记为只读。并不完全相同，但是通过这种方式，您可以拥有一致的行为。

相关问题：

https://github.com/angular/angular/issues/11447 https://github.com/angular/material2/issues/15399

Answer 4

有四种互斥的验证状态：valid、invalid、pending 和 disabled。当表单的状态为“禁用”时，它被视为免于所有验证检查。它不能同时有效和禁用，因此如果表单被禁用，则 form.valid 将始终为 false。在您的情况下，您似乎想明确检查 status 属性或将错误消息设置为 invalid 而不是 !valid。

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

4 个答案: