角度 14+

field = new FormControl<any>()

readonly formGroup = new FormGroup<any>({
    field2: new FormControl<any>(),
});

选项1

 ngOnInit() {
    # ...
    this.field.setDisable();
    this.field.setEnable();
    this.formGroup.controls.field2.setEnable();
    this.formGroup.controls.field2.setDisabled();
    # ...
}

选项2

private setFieldEnabled() {
    this.field.setEnable()
  }

private setFieldDisabled() {
    this.field.setDisable()
  }

private setField2Enabled() {
    this.formGroup.controls.breakdown.setEnable();
  }

private setField2Disabled() {
    this.formGroup.controls.breakdown.setDisable();
  } 

setEnableOrDisableFields(truth: boolean): void {
    if (truth) {
        this.setFieldEnabled()
        this.setField2Enabled();
        return
    }
    this.setFieldDisabled()
    this.setField2Disabled();
}

在FormControl中将disabled属性设置为true肯定会禁用输入字段。

this.form=this.fb.group({
  FirstName:[{value:'first name', disabled:true}],
  LastValue:['last name,[Validators.required]]
})

上面的例子将禁用FirstName输入字段。

但是当您试图通过这样的表单访问禁用的字段值时，真正的问题就出现了 console.log (this.form.value.FirstName);它显示为undefined而不是打印field的实际值。因此，要访问禁用字段的值，必须使用响应式表单提供的getRawValue()方法。即console.log (this.form.getRawValue () .FirstName);将打印表单字段的实际值，而不是未定义。

一个更普遍的方法是。

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

如果要使用禁用的表单输入元素(如正确答案中建议的那样) 如何禁用输入)验证他们也将被禁用，请注意!

(如果你使用的是提交按钮，如[disabled]="!Valid "它会将你的字段排除在验证之外)

注意

如果你正在创建一个使用变量为条件的表单，并试图改变它之后，它将不会工作，即表单将不会改变。

例如

this.isDisabled = true;
    
this.cardForm = this.fb.group({
    number: {value: null, disabled: this.isDisabled},
});

如果你改变变量

this.isDisabled = false;

形式不会改变。你应该使用

this.cardForm.get(数量).disable ();

BTW.

你应该使用patchValue方法来改变值:

this.cardForm.patchValue({
    number: '1703'
});

禁用FormControl可以防止它在保存时出现在表单中。你可以把它设置为readonly属性。

你可以这样做:

HTML:

<select formArrayName="value" [readonly] = "disableSelect">

打字稿:

this.disableSelect = true;

细节