web-dev-qa-db-fra.com

Comment définir l'entrée de tapis désactivée sur activé lorsque je clique dessus?

J'ai un mat-input et par défaut, il est désactivé pour modifier le texte. Comment définir désactivé sur activé lorsque je clique dessus? Et après cela, je veux redevenir désactivé quand il perd le focus ou que je clique sur Entrée. Puis-je faire cela?

angularangular-materialangular5
6
Anonymus_goat

Vous pouvez créer une variable d'état et l'affecter à l'attribut désactivé désactivé lors des événements click puis mouseout

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

J'ai utilisé de cette façon, à mon avis, c'est mieux

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

Cela fonctionne pour moi ...

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

et dans le composant ...

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

et le 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;}

Cet exemple utilise Angular Contrôles de matériau. Double-cliquez simplement sur l'entrée pour activer l'édition. Les mêmes principes devraient également fonctionner avec d'autres contrôles, comme PrimeNG et similaires.

3
Darren Street

Si vous utilisez un FormGroup, vous ne devez pas désactiver le formulaire dans le modèle HTML. Cela ne fonctionnera pas si vous essayez de désactiver en HTML avec FormControl. Au lieu de cela, cela doit être fait dans le FormGroup. Essaye ça:

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

et:

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

Aussi ... pas un gros problème mais ... vous devriez vraiment faire:

public form: FormGroup;

au lieu de:

public form: any;

N'oubliez pas non plus l'importation

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

Btw, le nom à l'intérieur de la déclaration de groupe de formulaire doit correspondre à tout ce que vous avez défini dans le HTML. Alors:

<input formControlName="myInputName">

et

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