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