最好的解决方案是:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

解决方案大纲(如果断开链接):

(1)创建指令

import { NgControl } from '@angular/forms';

@Directive({selector: '[disableControl]'})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {}
}

像这样使用它

<input [formControl]="formControl" [disableControl]="condition">

(3)由于禁用的输入不显示在表单中。值提交时，您可能需要使用以下代替(如果需要):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

一个更普遍的方法是。

// 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'
    });
}

当使ReactiveForm:[定义属性disbaled在FormControl]

 'fieldName'= new FormControl({value:null,disabled:true})

html:

 <input type="text" aria-label="billNo" class="form-control" formControlName='fieldName'>

我有同样的问题，但调用this.form.controls['name'].disable()没有修复它，因为我正在重新加载我的视图(使用router.navigate())。

在我的情况下，我必须重置我的表单之前重新加载:

这一点。Form = undefined; this.router.navigate((路径));

使响应式形式angular 2+的字段禁用和启用

1.禁用

添加[attr。Disabled]="true"输入。

<input class=“form-control” name=“Firstname” formControlName=“firstname” [attr.disabled]=“true”>

要启用

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

启用整个表单

this.formname.enable ();

单独启用特定字段

this.formname.controls.firstname.enable ();

same for disable, replace enable() with disable().

这很好。查询的注释。

如果你想先禁用(formcontrol)，那么你可以使用下面的语句。

this.form.first.disable ();