反应表单 - 禁用属性

Question

我正在尝试使用a中的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();

有关更多参考请参阅与此https://github.com/angular/angular/issues/11271#issuecomment-244507976相关的github中发布的问题

Answer 3

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

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

我[attr.disabled]从 HTML 中删除并在组件函数中执行此检查：

if (condition) {
    this.form.controls.myField.disable();
} else {
    this.form.controls.myField.enable();
}

Answer 4

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

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

...必须变成这样：

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

请参阅我的问题（我认为这不是重复的）：将表单状态对象中的“禁用”传递给 FormControl 构造函数不起作用

Answer 5

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

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 6

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

对于一个表单控件，禁用

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

或初始设置方法。

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

Answer 7

初始化（组件）使用：

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 8

只有使用响应式表单的人： 对于原生 HTML 元素 [attr.disabled] 将起作用，但对于材料元素，我们需要动态禁用元素。

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

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