Question

我正在尝试使用disabled中的formControl属性。当我把它放在模板中时，它可以工作：

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

但浏览器警告我：

看起来您正在使用带有被动形式的disabled属性指示。如果将disabled设置为true 当您在组件类中设置此控件时，实际上将在DOM中设置disabled属性您。我们建议使用此方法来避免“检查后更改”错误。
  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

所以我把它放在FormControl中，并从模板中删除：

constructor(private itemsService: ItemsService) {
    this._items = [];
    this.myForm = new FormGroup({
        id: new FormControl({value: '', disabled: true}, Validators.required),
        title: new FormControl(),
        description: new FormControl()
    });
    this.id = this.myForm.controls['id'];
    this.title = this.myForm.controls['title'];
    this.description = this.myForm.controls['description'];
    this.id.patchValue(this._items.length);
}

但它不起作用（它不会禁用input）。有什么问题？

Answer 1

我一直在使用[attr.disabled]因为我仍然喜欢这个模板驱动而不是程序化的enable（）/ disable（），因为它是优秀的IMO。

更改

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

到

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

如果您正在进行更新的材料更改md-input至mat-input。

Answer 2

要解决此问题，您可以尝试这样做。

禁用

this.myForm.controls['id'].disable();

启用

this.myForm.controls['id'].enable();

有关详细信息，请参阅与此相关的github中发布的问题 https://github.com/angular/angular/issues/11271#issuecomment-244507976

Answer 3

您可以使用以下方法启用/禁用表单控件：

control.disable（）或control.enable（）

如果这不起作用，可以使用指令

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]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>

此处描述了这种技术：

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

希望有所帮助

Answer 4

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

对于一个formcontrol使其禁用

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

或初始设置方法。

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

Answer 5

我在角度7中尝试了这些。它成功地工作了。

this.form.controls['fromField'].reset();
if(condition){
      this.form.controls['fromField'].enable();
}
else{
      this.form.controls['fromField'].disable();
}

Answer 6

在 Angular-9 中，如果您要禁用/启用按钮单击，则在使用反应式表单时，这是一个简单的解决方案。

在component.ts文件中定义一个函数

//enable example you can use the same approach for disable with .disable()

toggleEnable() {
  this.yourFormName.controls.formFieldName.enable();
  console.log("Clicked")
}

从您的component.html中调用

例如

<button type="button" data-toggle="form-control" class="bg-primary text-white btn- 
                reset" style="width:100%"(click)="toggleEnable()">

Answer 7

我发现我需要一个默认值，即使它是一个空字符串也可以使用。所以这个：

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

...必须成为这个：

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

看到我的问题（我不认为这是重复的）：Passing 'disabled' in form state object to FormControl constructor doesn't work

Answer 8

@Input('disableControlDirective') disableControlDirective;
   ngOnChanges(values) {
    if (values['disableControlDirective']) {
      const disableOrEnable = this.disableControlDirective ? 'disable' : 'enable';
      this.ngControl.control[disableOrEnable]();
    }
  }

https://stackoverflow.com/a/60075989/14990860

Answer 9

创建新的Form控件时，请使用next：

variable: FormControl = new FormControl({value: '', disabled: true});

如果要更改活动，请使用下一步：

this.variable.enable()

或

this.variable.disable()

Answer 10

就我而言，使用 Angular 8 。我想根据情况切换输入的启用/禁用。

[attr.disabled]对我不起作用，所以这是我的解决方法。

我从HTML和组件函数中删除了[attr.disabled。

if (condition) {
    this.form.controls.myField.disabled();
} else {
    this.form.controls.myField.enabled();
}

Answer 11

使用以下方法初始化（组件）

public selector = new FormControl({value: '', disabled: true});

然后代替使用（模板）：

<ngx-select
[multiple]="true"
[disabled]="errorSelector"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

只需删除禁用的属性即可：

<ngx-select
[multiple]="true"
[(ngModel)]="ngxval_selector"
[items]="items"
</ngx-select>

如果要显示项目，请启动（在组件中）：this.selector.enable();

Answer 12

这是我的解决方案：

this.myForm = this._formBuilder.group({
    socDate: [[{ value: '', disabled: true }], Validators.required],
    ...
)}

<input fxFlex [matDatepicker]="picker" placeholder="Select Date" formControlName="socDate" [attr.disabled]="true" />

Answer 13

仅使用反应式的人： 对于本机HTML元素，[attr.disabled]可以使用，但是对于实体元素，我们需要动态禁用该元素。

this.form.get('controlname').disable();

否则它将显示在控制台警告消息中。

Answer 14

使用[attr.disabled]代替[disabled]，在我的情况下，它可以正常使用

Answer 15

将名称属性添加到您的md输入。如果它没有解决问题，请发布您的模板

Answer 16

如果您使用表单验证，则免除禁用mat表单字段，因此请确保您的表单字段没有任何验证，例如（validators.required），这对我有用。例如：

editUserPhone：新的FormControl（{value：''，disabled：true}）

这使用户的电话号码不可编辑。

Answer 17

响应式表单的优点在于，您可以轻松地捕获任何输入元素的值更改事件，同时可以更改其值/状态。因此，这是使用enable disable解决问题的另一种方法。

这是stackblitz上的完整解决方案。

Answer 18

将disable =“ true”添加到html字段例子：disable

<amexio-text-input formControlName="LastName" disable="true" [(ngModel)]="emplpoyeeRegistration.lastName" [field-label]="'Last Name'" [place-holder]="'Please enter last name'" [allow-blank]="true" [error-msg]="'errorMsg'" [enable-popover]="true" [min-length]="2"
[min-error-msg]="'Minimum 2 char allowed'" [max-error-msg]="'Maximum 20 char allowed'" name="xyz" [max-length]="20">
[icon-feedback]="true">
</amexio-text-input>

Answer 19

执行此操作的最终方法。

ngOnInit() {
  this.interPretationForm.controls.InterpretationType.valueChanges.takeWhile(()=> this.alive).subscribe(val =>{
    console.log(val); // You check code. it will be executed every time value change.
  })
}

反应表单 - 禁用属性

19 个答案: