Conditionnellement rendre champ de saisie readonly Angulaire 2 ou 4: Conseils + Meilleur/le chemin à faire

J'ai été de tenter de répondre à quelqu'un elses question. Et en agissant de la sorte réalisé qu'il y avait un peu d'incertitude dans mon esprit au sujet d'un certain nombre de choses.
J'espère que quelqu'un peut fournir de la rétroaction sur les points numérotés de 1..4:

Tâche: Conditionnellement rendre champ de saisie readonly

La section pertinente de l'HTML:

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

Ajouter à Tapuscrit composant.

//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');

Dois dire que c'est une zone grise pour moi.

  1. Est de référencement HTMLInputElement ou Element directement avec @ViewChild Angulaire 2+ une mauvaise pratique?
    Seulement, j'ai vu souvent des exemples d'utilisation de ElementRef ou le chaînage de off à nativeElement de ElementRef.

Depuis VS Studio n'a pas Intelli-sense pour ceux-ci, j'ai soudain l'impression que je suis de codage dans l'obscurité. j'.e, vous ne jamais obtenir de la rétroaction au sujet des méthodes setAttribute ou removeAttribute, leurs paramètres nécessaires, etc.
(Je suis conscient de Que de jeter trop)

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

Autant que je me souvienne, je pense que vous devez le faire de cette façon, avec une propriété obtenez en caractères d'imprimerie:

get isReadOnly() :boolean {
}

Est-il valide?

  1. Que je me demande, pouvez-vous faire la méthode de la syntaxe trop dans le modèle HTML:
<input [attr.readonly]= "isReadOnly()">

Tapuscrit

isReadOnly() :boolean {
}

Est-il valide?

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

Mise à jour: Il y a aussi *ngIF donc de la sortie de l'un des deux éléments d'entrée avec le même nom. Mais qui sonne pour moi comme une masse pour casser une noix.

Définir valide.... Parce que si vous vous demandez si cela fonctionne alors de le tester et de trouver. C'est une très vaste question.... J'utilise 2 & 3 séparées sur les occasions, selon ce que j'ai besoin de calculer pour déterminer le type bool.

OriginalL'auteur JGFMK | 2017-07-20

  1. 41

    Vous avez besoin d'utiliser les éléments suivants (Angulaire 4):

    <input [readonly]="isReadOnly">

    Si vous utilisez att.readonly de l'entrée sera toujours en lecture seule, car la readonly attribut est présent, même si sa valeur est false. En utilisant [readonly] Angulaire place uniquement l'attribut si isReadOnly est vrai.

    En HTML, ce qui suit est suffisante pour provoquer une entrée pour être en lecture seule:

    <input readonly>

    OriginalL'auteur phn

  2. 1

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

    Dans votre *.composante.ts, initialiser la variable:

    private variable: boolean = true;

    OriginalL'auteur Rodrigo Pauletti

  3. -1

    Tout dépend de ce que vous voulez atteindre. Au premier coup d'oeil, je dirais que le pct. 2 est la façon la plus simple de le faire:

    <input [attr.readonly]= "isReadOnly">

    Ensuite, sur votre composant de la déclaration de la variable:

    isReadOnly: boolean;

    Après, vous affectez la valeur que vous souhaitez:

    //when you want to be read-only
isReadOnly = true;
//whe you want to be editable
isReadOnly = false;

    OriginalL'auteur BogdanC