Change disabled attribute value for matInput

Question

I have an issue related to the existing question

Cannot disable matInput element with this

Suggested answer works just fine:

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

But when I change this.disabled value to true - disabled attribute isn't changed. Is there a way to change the disabled attribute for matInput?

Answer 1

You can't use that form, because when you create a FormControl you are passing that value, in your case the value of this.disabled. You are not binding properties, you are only passing a value to make some checks, this value is not reflecting input properties' changes.

You can't achieve your goal by this way, you need to enable and disable your input manually, like this:

let control = this.form.get('name')
control.disabled ? control.enable() : control.disable();

Obviously you can put it into a click event directly into your template, something like this:

<button (click)="this.form.get('name').enable()">Enable</button>