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)

我通过在字段集中包装我的输入对象的标签来解决它: 字段集应该将disabled属性绑定到布尔值

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

使响应式形式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().

这很好。查询的注释。

最好的解决方案是:

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

不能在响应式表单中使用disabled属性禁用输入控件。 最好的解决方案是添加一个fieldset元素，并在fieldset元素中插入输入控件。 在此之后，您可以使用typescript轻松禁用或启用fieldset元素。

前女友。

index . html

<fieldset [disabled]="variable_name">
    <input name="name" formcontrolname="name">
</fieldset

index.ts

 variable_name:boolean;

 if(condition):
 {
     variable_name=true;
 }
 else
  {
     variable_name=false;
  }

这将很容易帮助您动态地隐藏或显示输入控件

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

or

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