首页 文章

反应表单 - 禁用属性

提问于
浏览 次
50

我正在尝试使用 formControl 中的 disabled 属性 . 当我把它放在模板中时，它的工作原理是：

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

但浏览器警告我：

看起来您正在使用带有反应式表单指令的disabled属性 . 如果在组件类中设置此控件时将disabled设置为true，则实际将在DOM中为您设置disabled属性 . 我们建议使用此方法来避免“检查后更改”错误 . 例：
form = new FormGroup（{
第一个：新FormControl（{值：'Nancy'，禁用：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 ） . 问题是什么？

angular typescript

10 回答

  • 2

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

    回复于
  • -1

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

    for disable

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

    for enable

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

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

    回复于
  • 8

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

    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

    希望能帮助到你

    回复于
  • -1

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

    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

    回复于
  • 40

    初始化（组件）使用：

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

    回复于
  • 0

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

    回复于
  • 0

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

    回复于
  • 0

    将disable =“true”添加到html字段示例：禁用

    <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>
    回复于
  • 1

    反应形式的美妙之处在于，您可以非常轻松地捕获任何输入元素的值更改事件，同时您可以更改其值/状态 . 所以这是使用 enable disable 解决问题的另一种方法 .

    这是stackblitz的完整解决方案 .

    回复于
  • 17

    最终的方式来做到这一点 .

    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.
  })
}
    回复于

相关问题