激活窗体-禁用属性

我尝试使用 formControl中的 disabled属性。当我把它放到模板中时，它工作了:

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

但是浏览器提醒我:

看起来您正在将禁用属性与反应形式一起使用 如果将禁用设置为 true 在组件类中设置此控件时，禁用的属性实际上将在 DOM 中设置为 我们建议使用这种方法来避免“检查后更改”错误。

  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)。问题是什么？

238207 次浏览
小开

添加名称属性到您的 md 输入。如果它不能解决问题，请张贴您的模板

小开
最佳答案

我一直在使用 [attr.disabled]，因为我仍然喜欢这个模板驱动的程序启用()/禁用() ，因为它是优越的 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。

小开

在我的例子中，使用[ attr.disked ]代替[ disable ] ，它工作正常

小开

可以使用下列方法启用/禁用窗体控件:

Able ()或者 control

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

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

希望能有帮助

小开

在 html 字段中加禁用 = “ true” 例如: 禁用

<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>
小开

反应形式的美妙之处在于，您可以非常容易地捕获任何输入元素的值更改事件，同时您可以更改它们的值/状态。因此，这里是另一种方法来解决你的问题使用 enable disable。

这是 Stackblitz的完整解决方案。

小开

使用以下方法初始化(组件) :

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();

小开

我发现我需要一个默认值，即使它是一个空字符串:

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

必须变成这样:

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

请看我的问题(我不认为这是一个复制品) : 将禁用的表单状态对象传递给 FormControl 构造函数不起作用

小开

这是最终的方法。

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.
})
}
小开

如果您正在使用表单验证，那么禁用 mat 表单字段将被豁免，所以请确保您的表单字段没有任何验证，比如(validators.need) ，这对我很有效。 例如:

EdUserPhone: new FormControl ({ value:’’，disable: true })

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

小开

这就是我的解决办法:

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


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

在我使用 角度8的例子中，我想根据条件切换输入的启用/禁用。

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

我从 HTML 中删除了 [attr.disabled]，并在组件函数中执行了以下检查:

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

只有那些使用反应形式的人: 对于原生 HTML 元素[ attr.disled ]可以工作，但是对于材料元素，我们需要动态禁用元素。

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

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

小开

我在角度7的地方试过了，效果很好。

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

对于一个表单控件使禁用

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

或初始集方法。

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

在 角度9如果你想禁用/启用按钮点击这里是一个简单的解决方案，如果你使用的是反应形式。

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

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


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

从组件中调用它

例如:

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

创建新的 Form 控件时，请使用下面的命令:

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

如果您想要更改活动，请使用以下命令:

this.variable.enable()

或者

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

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

小开

看起来您正在将禁用属性与反应形式指令一起使用。如果在组件类中设置此控件时将禁用属性设置为 true，则禁用属性实际上将在 DOM 中为您设置。我们建议使用这种方法来避免“检查后更改”错误。

例如:

form = new `FormGroup`({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
小开

扩展此答案 以修复具有控件初始状态和指令性能的 bug。

在模板中使用以下指令，并在模板中的表单控件上使用 [disableControl]="disabled"传递禁用状态。

import { Directive, Input, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';


/**
* Used to control form control disabled state from a template
*/
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[disableControl]',
})
export class DisableControlDirective implements OnInit {
@Input() set disableControl(condition: boolean) {
this._disableControl = condition;
this._set();
}
private _disableControl: boolean;


constructor(private ngControl: NgControl) {}


ngOnInit(): void {
this._set();
}


private _set() {
const control = this.ngControl?.control;
if (this._disableControl === true) {
if (control && control.enabled) control.disable();
} else {
if (control && control.disabled) control.enable();
}
}
}
小开

可以按照以下步骤禁用页上的多个控件。 在页面加载后创建控件并更改它们时，不会得到禁用 Reactive Forms 的属性错误。

this.formNextBonusGroup = NextTypePrim.asFormGroup();
for (var control in this.formNextBonusGroup.controls)
{
if (this.detailInputVisible)
{
this.formNextBonusGroup.get(control).disable();
} else
{
this.formNextBonusGroup.get(control).enable();
}
}
小开

不要对 [attr.disabled]或 [disabled]这样做，在你的 控制器:

  1. 用正文添加新方法:

     changeDeactive() {
if (yourCondition) {
this.yourForm.controls.yourControl?.enable();
} else {
this.yourForm.controls.yourControl?.disable();
}

    }

  2. (可选) ，最好的方法是在 subscription(RxJS)中执行，这意味着在构造函数(或 ngInit()函数)中添加一个新的订阅，因为您的条件可以改变:

     ngOnInit() {
// first approach:
this.yourForm.controls.yourControl?.valueChanges.subscribe(() => {
this.changeDeactive();
});


//or this:
this.yourForm.get('yourControl').valueChanges
.subscribe(() => {
this.changeDeactive();
});

    }


提交答案