¿Cómo hacer readonly todas las entradas en algún div en Angular2?

readonly angular 6

Question

Tengo una página con muchas entradas, y quiero hacerla ''solo readOnly ''. Encuentro esta solución: ¿Cómo cambiar el elemento HTML de solo lectura y el atributo requerido en Angular2 Typescript?

Pero no quiero hacerlo para cada entrada por separado.

¿Cómo puedo agregar la propiedad readOnly a todas las entradas en algunos div.

Answer 1

Intenta esto en el campo de entrada:

[readonly]="true"

Esperanza, esto funcionará.

Answer 2

Puedes hacer así. Abra un archivo ts y cree una interfaz con las entradas que desee y en la página que desea mostrar en la clase de exportación escriba

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

y en su plantilla haga esto como esto * ngFor = "deje que su tipo de su interfaz"

Answer 3

Si desea hacer un grupo completo, no solo un campo a la vez, puede usar la etiqueta <fieldset> HTML5.

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

    <!-- fields go here -->

</fieldset>

Answer 4

Si quisieras deshabilitar todas las entradas en forma Angular a la vez:

1- Formas reactivas:

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

2- Formas impulsadas por plantillas (NgForm):

Debería obtener NgForm en una variable NgForm (por ejemplo, llamada myNgForm) y luego

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

En el caso de NgForm, tenga cuidado de llamar al método de desactivación en el momento adecuado

Para determinar cuándo debe llamarlo, puede encontrar más detalles en esta respuesta de

Answer 5

Si usa formularios reactivos, también puede deshabilitar el formulario completo o cualquier subconjunto de controles en un FormGroup con myFormGroup.disable() .

Answer 6

Simplemente establezca la propiedad css del contenedor div ''punteros-eventos'' como ninguno, es decir, ''punteros-eventos: ninguno;''

Answer 7

Todas las entradas deben reemplazarse con una directiva personalizada que lea una única variable global para alternar el estado de solo lectura.

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

// component value
childmessage = false;