web-dev-qa-db-fra.com

Comment faire en lecture seule toutes les entrées de certains div en Angular2?

J'ai une page avec beaucoup d'entrées, et je veux faire 'readOnly' Je trouve cette solution: Comment changer l'élément HTML en lecture seule et l'attribut requis dans Angular2 Typescript?

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

Comment puis-je ajouter la propriété readOnly à toutes les entrées de certaines div.

angulartypescriptreadonlyangular2-forms
27
Max K

Essayez ceci dans le champ de saisie: 

[readonly]="true"

J'espère que ça va marcher.

60
Avnesh Shakya

Si vous souhaitez créer un groupe entier, et pas un seul champ à la fois, vous pouvez utiliser la balise HTML5 <fieldset>.

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

    <!-- fields go here -->

</fieldset>
15
user5868538

Si vous utilisez des formulaires réactifs, vous pouvez également désactiver le formulaire entier ou tout sous-ensemble de contrôles d'un groupe de formulaires avec myFormGroup.disable(). 

11
snort

Toutes les entrées doivent être remplacées par une directive personnalisée qui lit une seule variable globale pour basculer en lecture seule.

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

// component value
childmessage = false;
4
Leo Lanese

Si vous vouliez désactiver toutes les entrées sous une forme angulaire à la fois:

1- Formes Réactives:

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

2- Formulaires basés sur des modèles (NgForm):

Vous devriez obtenir le NgForm dans une variable NgForm (nommée par exemple myNgForm) puis

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

En cas de NgForm, veillez à appeler la méthode disable au bon moment

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

3
Ahmed Elkoussy

Il suffit de définir la propriété css du conteneur div '' événements de pointeur 'comme étant nulle

0
Ravinder Kumar

Vous pouvez faire comme ceci . Ouvrez un fichier ts et créez une interface avec les entrées que vous voulez et dans la page que vous voulez montrer sous write class write 

readonly yourinterface = yourinterface
readonly level: number[] = [];

et dans votre modèle, faites comme ceci * ngFor = "laissez votre type de votre interface"

0
user8956519