Angular15中禁用FormControl但保留表单验证的方案咨询

我定义了如下FormGroup：

this.fb.group({
    a: ["", Validators.required],
    b: ["", Validators.required],
    c: [{value: "", disabled: true}, Validators.required]
});

在模板中，填写前两个控件a和b后，会通过valueChanges.subscribe()方法生成第三个控件c的值。
表单下方有一个“下一步”按钮，该按钮需在表单验证通过（三个控件均不为空）时才启用，但当前不符合预期：由于控件c被禁用，其验证规则被跳过，导致即使生成函数失败、c为空，只要a和b填写完成，按钮就会启用。

我曾在其他帖子中看到使用[attr.disabled]的方案，但在Angular15中无效。请问是否有其他方法可以在模板中禁用字段同时保留验证规则生效？我希望找到无需在生成函数中手动设置字段错误的解决方案。

方式一：用readonly替代disabled #

Angular里禁用的表单控件会被排除在验证和提交流程外，而readonly仅限制用户手动编辑，控件仍处于启用状态，会正常参与表单验证。

• 修改FormGroup定义，移除c控件的disabled: true配置：

this.fb.group({
    a: ["", Validators.required],
    b: ["", Validators.required],
    c: ["", Validators.required]
});

• 在模板中给c控件添加readonly属性：

<input formControlName="c" readonly>

这样用户无法手动修改c的值，但它的required验证依然生效，只有当c有值时表单才会通过验证。

方式二：给表单添加全局自定义验证器 #

如果需要保留disabled的视觉效果，可以给整个表单添加自定义验证器，强制校验c控件的值是否为空，不受其禁用状态影响：

• 定义表单时添加全局验证器：

this.fb.group({
    a: ["", Validators.required],
    b: ["", Validators.required],
    c: [{value: "", disabled: true}, Validators.required]
}, {
    validators: (formGroup: FormGroup) => {
        const cControl = formGroup.get('c');
        if (!cControl?.value) {
            return { cRequired: 'c字段不能为空' };
        }
        return null;
    }
});

• 模板中按钮的禁用状态仍绑定表单的invalid属性：

<button [disabled]="form.invalid">下一步</button>

这种方式下，c控件保持禁用状态，但表单整体会强制检查它的值是否存在，满足验证要求。

内容的提问来源于stack exchange，提问作者Cristian De Vecchi