CODEWITHSUNDEEP
angularangular-materialangular5
Anonymus_goat
Anonymus_goat

Reputation: 339

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?

Upvotes: 14

Views: 92029

Answers (7)

Sushil
Sushil

Reputation: 830

This is the better way to disable the input field...

<input matInput formControlName="description" readonly />

in input add readonly only.

its work for me

Upvotes: 1

Ganesh_Deore
Ganesh_Deore

Reputation: 1

<input 
  matInput 
  placeholder="Email" 
  [ngModel]="data.userEmail" 
  formControlName="email" 
  readonly
/>

use only readonly

Upvotes: 0

Md Rafee
Md Rafee

Reputation: 5530

Why do you use semantically incorrect attributes like using readonly for disable. Reactive form has a property disabled, you can use it with matInput.

 foodCtrl: FormControl;
 disabled: boolean = true;
 ngOnInit() {
   this.foodCtrl = new FormControl({value: '', disabled: this.disabled})
 }

Here I used Reactive form with disable property, it will change with the change of disabled property.

Live Example: Stackblitz

Upvotes: 1

St&#233;phane GRILLON
St&#233;phane GRILLON

Reputation: 11864

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

Upvotes: 4

Darren Street
Darren Street

Reputation: 1830

This works for me...

<mat-form-field class="example-full-width">
     <textarea matInput cdkTextareaAutosize placeholder="Event Description" matTooltip="double-click to enable editing"
     [(ngModel)]="textareaSample" name='desc' readonly [readOnly]="readonly" (dblclick)="toggleEdit()"  ></textarea>

and in the component...

 textareaSample = "Tack Spanish Main hulk deadlights man-of-war transom Jake a caulk belay.";
 readonly: boolean;

  ngOnInit(): void {
    this.readonly = true;
  }
  toggleEdit(): void {
    this.readonly = !this.readonly;
  }

and the CSS...

textarea { font-size: 1.2em; padding:0px;}

textarea[readonly]{ background-color: transparent;}
textarea { background-color: #eee;}

textarea[readonly]:hover {  cursor: pointer;  cursor: default; background-color: transparent }
textarea:hover { cursor: auto; background-color: #eee;}

This example is using Angular Material controls. Just double click on the input to enable editing. The same principles should work with other controls too, like PrimeNG and similar.

Upvotes: 3

Rafael Moura
Rafael Moura

Reputation: 1327

I used this way, in my opion is better way 

<input matInput placeholder="Email" [ngModel]="franchise.user_email" formControlName="email" readonly>

Upvotes: 24

Iancovici
Iancovici

Reputation: 5731

You can create a state variable, and assign it to input disabled attribute on click then on mouseout events

<form class="example-form">
  <mat-form-field class="example-full-width" (click)="disabled=false" (mouseout)="disabled=true">
    <input matInput placeholder="Favorite food" value="Sushi"
          [attr.disabled]="disabled?'':null">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

Upvotes: 15

Related Questions