Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set disabled mat-input to enabled when I click on it?

I have a mat-input and in default it is disabled to change text. How to set disabled to enabled when I click on it? And after that I want to change to disabled again when it lose the focus or I hit enter. Can I do that?

like image 543
Anonymus_goat Avatar asked Dec 20 '17 11:12

Anonymus_goat


People also ask

How do I disable Matdatepicker?

mat-datepicker disable manual typing in input element So to disable typing in datepicker, add readonly propery to input element.


Video Answer


2 Answers

I used this way, in my opion is better way

<input matInput placeholder="Email" [ngModel]="franchise.user_email" formControlName="email" readonly>
like image 176
Rafael Moura Avatar answered Oct 15 '22 18:10

Rafael Moura


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....
});
like image 32
Stéphane GRILLON Avatar answered Oct 15 '22 18:10

Stéphane GRILLON