无法使用 [formControlName] 禁用 matInput 元素 [英] Cannot disable matInput element with [formControlName]

问题描述

我在 Angular 组件中使用了 matInput 和 mat-form-field (@angular/material)，但我无法禁用 matInput.

I'm using matInput and mat-form-field (@angular/material) in an Angular component, and I can't disable the matInput.

可以在此处查看工作示例.

我似乎遗漏了一些明显的东西，但对于我的生活，我无法弄清楚是什么.这是一个错误吗?

It seems likely that I'm missing something obvious, but for the life of me I can't figure out what. Is this a bug?

如果我从 CustomFormInputComponent 中删除 [formControlName]，那么我可以成功禁用 matInput

If I remove [formControlName] from the CustomFormInputComponent, then I can successfully disable the matInput

CustomFormInputComponent:

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-input',
  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName" [disabled]='disabled'>
    </mat-form-field>
  `,
})
export class CustomFormInputComponent  {
  @Input() form: FormGroup;
  @Input() formControlName: string = 'name';
  @Input() disabled = false;
}

AppComponent:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <p>At least one of these inputs should be disabled, but none are :(</p>

    <app-custom-form-input [form]="form" [disabled]='true'></app-custom-form-input>

    <app-custom-form-input [form]="form" [disabled]="'disabled'"></app-custom-form-input>
  `,
})
export class AppComponent  {
  public form: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ''
    })
  }
}

非常感谢任何见解！

有关 David 回答的更多上下文:Angular 根据响应式表单控件的禁用状态更新 DOM 状态.我认为正在发生的事情:angular 在 AppComponent 之前呈现 CustomFormInputComponent 并将组件呈现为禁用状态.然后呈现 AppComponent 并在启用 name 控件的情况下构建 form.然后，Angular 会取消禁用 DOM 输入元素(这是设计的行为).

For a bit more context on David's answer: Angular updates DOM state based on the disabled status of a reactive form control. What I think is happening: angular is rendering the CustomFormInputComponent before the AppComponent and is rendering the component as disabled. Then the AppComponent is rendered and the form is built with the name control enabled. Angular then goes and un-disabled the DOM input element (which is behavior as designed).

推荐答案

如果您使用的是 FormGroup，则不应在 HTML 模板中禁用该表单.如果您尝试在 HTML 中与 FormControl 一起禁用，它将不起作用.相反，它应该在 FormGroup 中完成.试试这个:

If you are using a FormGroup, then you should not disable the form in the HTML Template. It will not work if you try to disable in HTML together with FormControl. Instead, it should be done within the FormGroup. Try this:

  template: `
    <mat-form-field [formGroup]="form">
      <input matInput placeholder='Name' [formControlName]="formControlName">
    </mat-form-field>
  `

和:

ngOnInit() {
    this.form = this.fb.group({
        name: new FormControl({ value: '', disabled: this.disabled })
    });
}

还有……没什么大不了的，但是……你真的应该这样做:

Also...not a big deal but..you should really be doing:

public form: FormGroup;

代替:

public form: any;

不要忘记导入

import { FormGroup, FormControl } from '@angular/forms';

顺便说一句，表单组声明中的名称应该与您在 HTML 中设置的名称相匹配.所以:

Btw, the name inside of the form group declaration should match whatever you have set in the HTML. So:

<input formControlName="myInputName">

和

this.form = this.fb.group({
    myInputName....
});

这篇关于无法使用 [formControlName] 禁用 matInput 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！