Comment rendre en lecture seule toutes les entrées dans un div en Angular2 ?

Question

J'ai une page avec plusieurs entrées, et je veux la rendre ' readOnly ' Je trouve cette solution : Comment modifier l'attribut readonly et required d'un élément HTML dans Angular2 Typescript ?

Mais je ne veux pas le faire pour chaque entrée séparément.

Comment puis-je ajouter readOnly à toutes les entrées dans une certaine division.

Answer 1

Essayez ceci dans le champ de saisie :

[readonly]="true"

J'espère que ça va marcher.

Answer 2

Si vous voulez faire un groupe entier, et pas seulement un champ à la fois, vous pouvez utiliser le HTML5 <fieldset> étiquette.

<fieldset [disabled]="killfields ? 'disabled' : null">

    <!-- fields go here -->

</fieldset>

Answer 3

Si vous utilisez des formulaires réactifs, vous pouvez également désactiver le formulaire entier ou tout sous-ensemble de contrôles dans un FormGroup à l'aide de la commande myFormGroup.disable() .

Answer 4

Si vous voulez désactiver toutes les entrées d'un formulaire Angular en une seule fois :

1- Formes réactives :

myFormGroup.disable() // where myFormGroup is a FormGroup 

2- Formulaires pilotés par des modèles (NgForm) :

Vous devriez saisir le NgForm dans une variable NgForm (par ex. nommée myNgForm) puis

myNgForm.form.disable() // where form here is an attribute of NgForm 
                      // & of type FormGroup so it accepts the disable() function

Dans le cas de NgForm, veillez à appeler la méthode de désactivation au bon moment.

Pour déterminer quand l'appeler, vous pouvez trouver plus de détails dans cette réponse de Stackoverflow

Answer 5

Toutes les entrées doivent être remplacées par une directive personnalisée qui lit une seule variable globale pour activer le statut de lecture seule.

// template
<your-input [readonly]="!childmessage"></your-input>

// component value
childmessage = false;