web-dev-qa-db-fra.com

Comment désactiver une zone de texte ou un champ de formulaire

J'utilise des formes matérielles et réactives Angula (4) + Angular pour mon champ de formulaire. Comment puis-je désactiver cela? J'ai essayé google, mais des choses comme disabled = "true" ou quelque chose comme ça. Pouvez-vous me montrer la bonne syntaxe? Ça doit être facile. Merci!

mon exemple:

<mat-form-field class="xxx-form-full-with">
    <textarea matInput placeholder="My description" formControlName="xxx"></textarea>
</mat-form-field>
3
dafna

Avec les formulaires réactifs, [disabled] ne fonctionnera pas. Vous devez définir le statut désactivé sur le formulaireContrôle à la place:

this.myForm = this.formBuilder.group({
  xxx: [{value: 'someValue', disabled:true}]
})

Rappelez-vous également que lors de cette opération, ce champ ne sera pas inclus dans l’objet formulaire, par exemple lors de la soumission. Si vous souhaitez inspecter toutes les valeurs, désactivée incluse, utilisez:

this.myForm.getRawValue();
9
AJT_82

Vous pouvez simplement utiliser disabled 

Essaye ça

<mat-form-field>
    <textarea matInput placeholder="Textarea" [disabled]="isDisabled"></textarea>
</mat-form-field>
<button mat-raised-button  color="primary" (click)="disabletextArea()">disable textarea</button>

En composant:

  isDisabled: boolean;    
  disabletextArea(){
    this.isDisabled = !this.isDisabled;
  }

Voici le travail Exemple

0
Saurabh Agrawal

Vous pouvez utiliser une propriété désactivée en tant que propriété codée en dur pour votre élément textarea

<textarea disabled></textarea>

Vous pouvez également le lier à une méthode de votre classe de composant pour le désactiver dynamiquement en fonction d'une condition.

[disabled]="getDisabledValue()"

Dans votre fichier .ts

getDisabledValue() {
  //your condition, in this case textarea will be disbaled.
  return true; 
}
0
Ankit Kapoor