web-dev-qa-db-fra.com

Rendre conditionnel le champ de saisie en lecture seule dans Angular 2 ou 4: Advice + Best/comment le faire

J'essayais de répondre quelqu'un d'autre question . Et, ce faisant, j'ai réalisé qu'il y avait un peu d'incertitude dans mon esprit à propos de certaines choses… .. J'espère que quelqu'un pourra donner son avis sur les points numérotés 1..4:

Tâche: Rendre conditionnellement le champ de saisie en lecture seule

Section pertinente du HTML:

<input type="text" placeholder="Club Name" #clubName>

Ajoutez ceci au composant TypeScript.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

Je dois dire que c'est une zone grise pour moi. 

  1. Faire référence à HTMLInputElement ou Element directement avec @ViewChild dans Angular 2+ est-il une mauvaise pratique? .__ Seulement, j’ai souvent vu des exemples utilisant ElementRef ou chaînant à nativeElement de ElementRef.

Puisque VS Studio n’a pas Intelli-sense pour ceux-là, j’ai soudainement l’impression de coder dans le noir. c'est-à-dire que vous ne recevez jamais de retour d'informations sur les méthodes setAttribute ou removeAttribute, leurs exigences de paramètres, etc.

  1. Ensuite, après avoir examiné la documentation, je suppose que vous pouvez le faire directement sur votre entrée dans le modèle HTML:
<input [attr.readonly]= "isReadOnly">

IIRC Je pense que vous devez faire de cette façon avec une propriété get dans TypeScript:

get isReadOnly() :boolean {
}

Ce moyen est-il valide? 

  1. Je me demande si vous pouvez également utiliser la syntaxe de la méthode dans le modèle HTML:
<input [attr.readonly]= "isReadOnly()">

Manuscrit

isReadOnly() :boolean {
}

Ce moyen est-il valide?

4. En résumé, quelle est la meilleure approche?

Mise à jour: Il y a aussi * ngIF, donc vous générez l'un des deux éléments d'entrée avec le même nom. Mais cela me semble être une massue pour casser une noix.

angularreadonlyattrhtml-input
12
JGFMK

Vous devez utiliser les éléments suivants (angulaire 4):

<input [readonly]="isReadOnly">

Si vous utilisez att.readonly, l'entrée sera toujours en lecture seule car l'attribut readonly sera présent même si sa valeur est false. En utilisant [readonly]Angular ne placera l'attribut que si isReadOnly est vrai.

En HTML, les éléments suivants sont suffisants pour qu'une entrée soit en lecture seule:

<input readonly>
37
phn

Vous pouvez utiliser <input readonly="{{ variable }}>".

Dans votre * .component.ts , initialisez la variable:

private variable: boolean = true;
0
Rodrigo Pauletti