反应形式-禁用属性

我正在尝试使用中的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）。问题是什么？

我一直在使用，[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。

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

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

希望能帮助到你

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

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

...必须变成这样：

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

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

就我的角度8。我想根据情况切换输入的启用/禁用。

[attr.disabled] 不适用于我，所以这是我的解决方案。

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

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

初始化（组件）使用：

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

仅谁使用反应形式： 对于本机HTML元素[attr.disabled]将起作用，但对于实体元素，我们需要动态禁用该元素。

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

对于一个formcontrol使禁用

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

或初始设置方法。

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

使用[attr.disabled]代替[disabled]，就我而言，它可以正常工作

将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>

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

这是关于stackblitz的完整解决方案。

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

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

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

这是我的解决方案：

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

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

在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()">

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

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

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

this.variable.enable() 

要么

this.variable.disable()

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

做到这一点的最终方法。

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