无法使用[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: ''
    })
  }
}

任何见解都将不胜感激！

Any insights are greatly appreciated!

有关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模板中禁用该表单.如果您尝试与FormControl一起在HTML中禁用它，它将不起作用.而是应在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屋！