我已经尝试遵循此处其他答案的示例，但未成功！

我创建了一个响应式表单（即动态表单），并且想在任何给定时间禁用某些字段。我的表格代码：

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

我的html：

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

我减少了代码以方便使用。我想禁用类型选择的字段。我尝试执行以下操作：

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

不工作！有人有建议吗？

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

要么

this.form.controls['name'].disable();

请注意

如果要使用条件变量创建表单并稍后尝试对其进行更改，则该表单将不起作用，即表单将不会更改。

例如

this.isDisabled = true;

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

如果您更改变量

this.isDisabled = false;

形式不会改变。你应该用

this.cardForm.get（'number'）。disable（）;

顺便说一句。

您应该使用patchValue方法更改值：

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

在具有反应形式的DOM中使用禁用是一种不好的做法。FormControl当您从中初始化时，可以在中设置此选项

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

财产value是没有必要的

或者您可以使用get('control_name')并设置表单控件disable

this.userForm.get('username').disable();

我通过将输入对象及其标签包装在字段集中来解决此问题：字段集应将disable属性绑定到boolean

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

所述disablingFormControl prevents它存在于，在成形saving。您可以将其设置为readonly属性。

您可以通过以下方式实现：

HTML：

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

TS：

this.disbaleSelect = true;

在这里找到这个

如果使用disabled表单输入元素（如正确答案中建议的 如何禁用输入），对它们的验证也将被禁用，请注意这一点！

（并且，如果您使用的是“提交”按钮[disabled]="!form.valid"，则会从验证中排除您的字段）

一种更通用的方法是。

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

如果要禁用first（formcontrol），则可以使用以下语句。

this.form.first.disable();

这对我有用： this.form.get('first').disable({onlySelf: true});

this.form.enable()
this.form.disable()

或formcontrol'first'

this.form.get('first').enable()
this.form.get('first').disable()

您可以设置禁用或启用初始设置。

 first: new FormControl({disabled: true}, Validators.required)

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

最好的解决方案在这里：

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 ) {}
}

（2）像这样使用

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

（3）由于禁用的输入不会在提交时显示在form.value中，因此您可能需要使用以下内容（如果需要）：

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

我有同样的问题，但是调用this.form.controls ['name']。disable（）并不能解决它，因为我正在重新加载视图（使用router.navigate（））。

就我而言，我必须在重新加载之前重置表单：

this.form =未定义；this.router.navigate（[path]）;

setTimeout(() => { emailGroup.disable(); });

您可以声明一个函数来启用/禁用所有表单控件：

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

像这样使用

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

为了使一个场禁用和启用的反应形式角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();

与disable相同，将enable（）替换为disable（）。

这很好。注释查询。