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

Question

我有这个简单的表单，用于创建和更新案例，因此对于创建案例，用户将输入数据，并基于验证器I将获得form.valid(true，false(。在更新的情况下，我只是从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();
}

堆叠litz示例

Answer 1

这是正确的。文件上写着：

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

状态文件显示：

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

• 有效：此控件已通过所有验证检查
• 无效：此控件至少有一次验证检查失败
• 待定：此控件正在进行验证检查
• DISABLED：此控件不受验证检查的约束

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

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>

Answer 3

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

相关问题：

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

Answer 4

对于输入被禁用的更新情况，模板驱动表单以通过验证的解决方法：

<div *ngIf="field.editable; else disabled">
<ion-input ..
></ion-input> 
</div>
<ng-template #notEditable>
<p class="disabled">Some text</p>
</ng-template>