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

【问题标题】：Reactive form valid property return false when form is disabled禁用表单时，响应式表单有效属性返回 false
【发布时间】：2018-12-30 04:31:17
【问题描述】：

我有这个简单的表格并用于创建和更新案例，因此对于创建案例，用户将输入数据并基于验证器我将得到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();
  }

【问题讨论】：

【解决方案1】：

这是正确的。文档说：

控件在其状态为 VALID 时有效。

并且状态文档说：

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

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

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

PENDING：此控件正在进行验证检查。

DISABLED：此控件免于验证检查。

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

【讨论】：

有什么方法可以检查表单被禁用时是否有效？
我猜你可以启用它，检查它是否有效，然后再次禁用它。但是，既然它已被禁用，为什么还要关心呢？
我将 form.valid 属性用于按钮 disabled ，相同的按钮用于创建和更新，所以我希望在更新情况下表单具有数据，因此有效属性有效，因此启用按钮跨度>
我通过创建一个函数来解决这个问题并检查表单是否被禁用返回 true 否则返回 form.valid 但我认为这样做不正确
@MuhammedAlbarmawi。我想你想显示数据和一个“编辑”按钮，当我们点击编辑时，你会显示一个允许编辑值的表单。所以我将创建一个变量（例如，称为“onEdit”）并制作两种形式。两个
..
和
..
成功了

【解决方案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>

【讨论】：

【解决方案3】：

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