无法使用[formControlName]禁用matInput元素

Question

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

这里可以看到一个工作的例子.

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

如果我[formControlName]从中删除CustomFormInputComponent,那么我可以成功禁用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状态.我认为发生了什么:角度渲染CustomFormInputComponent之前,AppComponent并将组件渲染为禁用.然后渲染AppComponent,并在启用控件的form情况下构建name.然后,Angular将对DOM输入元素(这是设计的行为)进行取消禁用.

Answer 1

 <mat-form-field fxFlex>    
   <input matInput placeholder="No" formControlName="no" readonly>    
 </mat-form-field>

您是否尝试过只读选项。这对我来说很好用。

工作代码：html：

 <mat-form-field fxFlex>    
   <input matInput placeholder="No" formControlName="no" readonly>    
 </mat-form-field>

Answer 2

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

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

还......不是什么大不了但你真的应该做的事情:

public form: FormGroup;

代替:

public form: any;

不要忘记导入

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

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

<input formControlName="myInputName">

和

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

Answer 3

我遇到了同样的问题，我已经用 *ngIf 指令解决了它。如果应该禁用输入，请禁用它，删除其表单绑定并手动提供其值。如果不是，则按原样使用您的 formControl。

这是您的模板：

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

改变它：

<mat-form-field *ngIf="disabled">
  <input matInput placeholder='Name' [value]="form.formControlName" disabled='true'>
</mat-form-field>
<mat-form-field *ngIf="!disabled" [formGroup]="form">
  <input matInput placeholder='Name' [formControlName]="formControlName">
</mat-form-field>

Answer 4

如果您使用的是 FormGroup，则必须使用 disabled 属性来创建您的 FormGroup/FormControl：

name: new FormControl({ value: '', disabled: this.disabled })

但是如果你想禁用/启用你可以在你的 HTML 中使用它：

<input type="text" formControlName="name" [attr.disabled]="isDisabled == true ? true : null" />

Answer 5

-->输出 试试这个。

.html 文件

   <form name="fg" [formGroup]="fg" >
        <mat-form-field >
                  <input matInput placeholder="Email" formControlName="email">
           </mat-form-field>
    </form>

.ts 文件导入这个： import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private _formBuilder: FormBuilder) { }



   this.fg= this._formBuilder.group({
        email :[
            {
              value : 'vijay@gmail.com',
              disabled: true
            },
Validators.required
        ],