如何为new FormControl()设置value、disabled属性并按需添加验证？

你可以通过两种方式给FormControl设置初始值和禁用状态，同时保留按需添加验证的逻辑，以下是优化后的代码：

方式一：构造时直接配置（推荐） #

利用FormControl构造函数的配置参数，一步到位设置初始值和禁用状态，代码更简洁高效：

formBuilder(form, props) {
    const { required, disabled, value, controlName } = props;
    // 直接在创建FormControl时传入初始值与禁用配置
    const formControl = new FormControl({
        value: value,
        disabled: disabled
    });
       
    if (required) {
        formControl.setValidators([
            Validators.required,
            this.validate.plainText,
        ]);
        // 更新控件状态，确保验证规则立即生效
        formControl.updateValueAndValidity();
    }
    form.addControl(controlName, formControl);
}

方式二：创建后动态设置 #

如果需要在后续逻辑中动态调整值或禁用状态，可以用setValue和disable/enable方法：

formBuilder(form, props) {
    const { required, disabled, value, controlName } = props;
    const formControl = new FormControl();
    
    // 设置初始值
    formControl.setValue(value);
    // 设置禁用/启用状态
    disabled ? formControl.disable() : formControl.enable();
       
    if (required) {
        formControl.setValidators([
            Validators.required,
            this.validate.plainText,
        ]);
        formControl.updateValueAndValidity();
    }
    form.addControl(controlName, formControl);
}

关键说明： #

• 当传入的props中disabled: true时，控件会被禁用，用户无法编辑；value: "sample"会作为控件的初始值填充。
• 设置验证器后调用updateValueAndValidity()是为了让新的验证规则立即生效，避免表单状态不同步。
• 结合你提供的props示例，required: false时不会添加必填验证规则，符合需求。

内容的提问来源于stack exchange，提问作者3gwebtrain