Cannot disable matInput element with [formControlName]

问题

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

A working example can be seen here.

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?

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!

Answer

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

回答1:

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

and:

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;

instead of:

public form: any;

Don't forget the import as well

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

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

<input formControlName="myInputName">

and

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

回答2:

-->output try this.

.html file

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

.ts file import this : 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
        ],

回答3:

I have had the same issue and I have solved it with *ngIf directive. If input should be disabled, make it disabled, remove its form binding and give its value manually. If it's not, than use your formControl as it is.

This is your template:

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

change it with:

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

回答4:

If You are using material then you can add

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

回答5:

If you are using FormGroup you have to use disabled promerty creating your FormGroup/FormControl:

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

But if you want disabled/enable you can use this in your HTML:

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

回答6:

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

Have you tried readonly option. This works fine with me.

Working code: html:

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

回答7:

In the html page:

<form [formGroup]="formForAddDSBData">
              <mat-form-field class="form-element"  >
              <mat-icon matPrefix><i class="fa fa-address-card fa-1x"></i></mat-icon>
              <input matInput disabled id="AreaAddress" formControlName="AreaAddress" 
              #Contact1 placeholder="Area/Address" type="text" >
               <mat-error *ngIf="!formForAddDSBData.controls['AreaAddress'].valid && 
               formForAddDSBData.controls['AreaAddress'].touched">
                Area/Address is required
              </mat-error> 
      </mat-form-field>
</form>

to disable this mat-input you need to write the below code in .ts file

this.formForAddDSBData.get("AreaAddress").disable();

来源：https://stackoverflow.com/questions/48451206/cannot-disable-matinput-element-with-formcontrolname