🥇 Mano de entrada de datos y estados

Durante el siguiente módulo nos enfocaremos en el trabajo de control de estados mediante React. Para ello vamos a capturar datos mediante campos de entrada, y con ellos vamos a controlar dichos estados.

🍿 ¿Cómo validar datos con Ionic?

Hasta este punto podemos crear nuevos cursos agregando un título y una fecha de inicio. Este se puede ver dentro del componente AgregarCurso.

<IonGrid>
    <IonRow>
        <IonCol>
            <IonItem>
                <IonLabel position="floating">Titulo del curso</IonLabel>
                <IonInput type="text" />
            </IonItem>
        </IonCol>
    </IonRow>
    <IonRow>
        <IonCol>
            <IonItem>
                <IonLabel position="floating">Fecha</IonLabel>
               <IonDatetime displayFormat="MM DD YY"  />
            </IonItem>
        </IonCol>
    </IonRow>
    <IonRow>
        <IonCol>
            <IonButton fill="clear" onClick={props.onClickCancelar}>
                Cancelar
            </IonButton>
        </IonCol>
        <IonCol>
            <IonButton color="primary">Guardar</IonButton>
        </IonCol>
    </IonRow>
</IonGrid>

Sin embargo si deseamos cerciorarnos que los valores enviados desde el formularios tengan un valor asignado, requerimos realizar una validación de dichos valores.

Importamos los hooks useRef y useState del paquete React, y agregamos las referencias a los campos así como un estado error tipo string para el control de errores.

const [error, setError] = useState<string>('');

const tituloRef = useRef<HTMLIonInputElement>(null);
const fechaRef = useRef<HTMLIonDatetimeElement>(null);

Adicionalmente tenemos que agregar los controles ref a cada campo.

<IonGrid>
    <IonRow>
        <IonCol>
            <IonItem>
                <IonLabel position="floating">Titulo del curso</IonLabel>
                <IonInput type="text" ref={tituloCapturado} />
            </IonItem>
        </IonCol>
    </IonRow>
    <IonRow>
        <IonCol>
            <IonItem>
                <IonLabel position="floating">Fecha</IonLabel>
                <IonDatetime displayFormat="MM DD YY" ref={fechaCapturada} />
            </IonItem>
        </IonCol>
    </IonRow>
    <IonRow>
        <IonCol>
            <IonButton fill="clear" onClick={props.onClickCancelar}>
                Cancelar
            </IonButton>
        </IonCol>
        <IonCol>
            <IonButton color="primary">Guardar</IonButton>
        </IonCol>
    </IonRow>
</IonGrid>

Una ves completado lo anterior, requerimos también agregan una función que guarde controle el proceso de la validación.

const onClickGuardar = () => {
    const tituloCapturado = tituloRef.current!.value;
    const fechaCapturada = fechaRef.current!.value;
    if(!tituloCapturado || !fechaCapturada || tituloCapturado.toString().trim().length == 0 || fechaCapturada.trim().length == 0) {
        setError('Ingresa un título y una fecha valida');
        return;
    }
    setError('');
}

De esta forma cuando alguno de los dos campos sea invalido, el control de estado error mostrará un mensaje.

Agregamos este mensaje justo debajo de los campos de entrada.

{error && (
    <IonRow class="ion-text-center">
        <IonCol>
            <IonText color="danger">
                <p>{error}</p>
            </IonText>
        </IonCol>
    </IonRow>
)}

Finalmente para disparar el evento enlazamos la acción al botón Guardar.

<IonButton color="primary" onClick={onClickGuardar}>Guardar</IonButton>

🍿 ¿Cómo enviar datos al modal en Ionic?

Estudio de componentes de Ionic
comments powered by Disqus