Componente de TextField
¿Qué es el componente de TextField?
El componente de TextField permite crear campos de entrada de texto en tu aplicación. Nota: Este componente es ideal para formularios y captura de datos del usuario.
Parámetros
- name?: string - El nombre del campo del formulario, usado para el envío del formulario
- label?: Widget
| string - La etiqueta del campo del formulario, puede ser una cadena o un widget - leadingIcon?: Widget
- Un icono para mostrar antes del campo de entrada - trailingIcon?: Widget
- Un icono para mostrar después del campo de entrada - placeholder?: string - Texto de marcador de posición para el campo de entrada
- type?: TypeFormField - El tipo del campo de entrada (texto, contraseña, email, número, etc.)
- defaultValue?: string | number | boolean - El valor actual del campo de entrada
- required?: boolean - Si el campo es obligatorio o no
- disabled?: boolean - Si el campo está deshabilitado o no
- readOnly?: boolean - Si el campo es de solo lectura o no
- checked?: boolean - Si el campo está marcado (para checkboxes/radio buttons)
- onChange?: (value: string, validate?: () => ) => void - Función de callback cuando el valor cambia
- onBlur?: (value: string, validate?: () => ) => void - Función de callback cuando el campo pierde el foco
- onFocus?: (value: string, validate?: () => ) => void - Función de callback cuando el campo gana el foco
- validation?: (value: string | number | boolean) => string - Función de validación para validar el valor de entrada
- style?: TextFieldStyle - Estilo para el campo del formulario
- styleHover?: TextFieldStyle - Estilo para el campo del formulario cuando se pasa el cursor por encima
- styleActive?: TextFieldStyle - Estilo para el campo del formulario cuando está activo (enfocado o clicado)
- styleFocus?: TextFieldStyle - Estilo para el campo del formulario cuando está enfocado
- styleDisabled?: TextFieldStyle - Estilo para el campo del formulario cuando está deshabilitado
- styleError?: TextFieldStyle - Estilo para el campo del formulario cuando hay un error
- styleTextError?: TextStyle - Estilo para el texto de error
- autoValidate?: AutoValidateMode - Modo de auto-validación (onChange, onBlur, onFocus, onSubmit)
- controller?: TextFieldController - Controlador para el campo del formulario
- css?: Css - Estilos CSS personalizados
¿Cómo se utiliza el componente de TextField?
Para utilizar el componente de TextField, se debe importar y luego usar en el código.
import TextField, { TextFieldStyle } from "@seigenta/TypesCraft/widgets/forms/textfield";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
import BorderStyle from "@seigenta/TypesCraft/widgets/utils/border";
// El resto de tu código
new TextField({
label: "Nombre",
placeholder: "Ingresa tu nombre",
style: new TextFieldStyle({
inputBackgroundColor: Color.white(),
borderStyle: BorderStyle.all({
border:{
color: Color.gray(),
width: Size.px(1),
styleBorder: StyleBorder.solid
}
}),
radiusBorder: Size.px(4),
padding: Size.px(8)
}),
id: "campo-nombre",
key: "nombre-1"
})
En el ejemplo anterior, se crea un nuevo componente de TextField con una etiqueta "Nombre", un placeholder, y varios estilos personalizados.
Parámetros
Estilos
El componente TextField tiene sus propias variables de estilo a través de la clase TextFieldStyle.
- labelStyle?: (TextStyle) - Define el estilo para la etiqueta del campo.
- leadingStyle?: (StyleProperty) - Define el estilo para el icono inicial (si existe).
- trailingStyle?: (StyleProperty) - Define el estilo para el icono final (si existe).
- errorStyle?: (TextStyle) - Define el estilo para los mensajes de error.
- inputStyle?: (TextStyle) - Define el estilo para el texto de entrada.
- inputBackgroundColor?: (Color) - Define el color de fondo del campo de entrada.
- borderStyle?: (BorderStyle) - Define el estilo del borde del campo.
- radiusBorder?: (Size) - Define el radio de las esquinas del campo.
- padding?: (Size) - Define el espacio interno del campo.
- width?: (Size) - Define el ancho del campo.
- height?: (Size) - Define la altura del campo.
- css?: (Css) - Permite aplicar estilos CSS personalizados.
TextFieldController
El componente TextField puede utilizar un controlador para gestionar su estado y eventos. El TextFieldController permite:
- Obtener y establecer el valor del campo
- Validar el contenido del campo
import TextField, { TextFieldController } from "@seigenta/TypesCraft/widgets/forms/textfield";
// Crear un controlador
const controller = new TextFieldController();
// Usar el controlador con un TextField
new TextField({
label: "Email",
controller: controller,
placeholder: "[email protected]"
});
// Obtener el valor actual
const email = controller.value;
// Establecer un valor
controller.value = "[email protected]";
Validación
El componente TextField puede validar el contenido del campo. Para esto, este tiene dos propiedades. autoValidateMode: AutoValidateMode y validate: (value: string|number|boolean) => string
-
autoValidateMode: AutoValidateMode Define el modo de validación automática. Puede ser "onBlur" (al perder el foco), "onChange" (al cambiar el valor), "onSubmit" (al enviar el formulario), "onFocus" (al obtener el foco) o "none" (sin validación automática).
-
validate: (value: string|number|boolean) => string Define la función de validación. Debe devolver un mensaje de error si el valor no es válido, o "" si es válido. Si el elemento no es valido, entonces el formulario entrara a estado de error y para eso existe el "style" de error, que es del mismo tipo que el "inputStyle".
new TextField({
label: "Username",
name: "username",
style: this.styleTextField,
controller: this.usernameController,
autoValidate: AutoValidateMode.blur,
validate: (value: string | any) => {
if (value.length < 6) {
return "El nombre de usuario debe tener al menos 6 caracteres";
}
return null;
},
})
Ejemplo Completo
import { Component, Context, MaterialApp, Widget } from "@seigenta/typescraft/widget";
import { Center } from "@seigenta/typescraft/widgets/containers/center";
import Flex, { FlexDirection, FlexStyle, MainAxisSize } from "@seigenta/typescraft/widgets/containers/flex";
import { AutoValidateMode, TextFieldController, TextFieldStyle } from "@seigenta/typescraft/widgets/forms/textfield";
import Size from "@seigenta/typescraft/widgets/utils/size";
import Text, { FontWeight, TextAlign, TextStyle, TextType } from "@seigenta/typescraft/widgets/texts/text";
import TextField from "@seigenta/typescraft/widgets/forms/textfield";
import FloatingButton from "@seigenta/typescraft/widgets/buttons/floatingButton";
import Container, { ContainerStyle } from "@seigenta/typescraft/widgets/containers/container";
import Color from "@seigenta/typescraft/widgets/utils/color";
import { Css } from "@seigenta/typescraft/global/style";
import TextButton from "@seigenta/typescraft/widgets/buttons/textButton";
import BorderButton from "@seigenta/typescraft/widgets/buttons/borderButton";
import { ButtonStyle } from "@seigenta/typescraft/widgets/buttons/button";
import BoxShadow from "@seigenta/typescraft/widgets/utils/boxShadow";
class Login extends Component {
styleTextField = new TextFieldStyle({
padding: Size.px(4), // 10px padding
})
private usernameController = new TextFieldController();
private passwordController = new TextFieldController();
validatePassword(password: string): string {
if (password.length < 8) {
return "La contraseña debe tener al menos 8 caracteres";
} else if (!/[A-Z]/.test(password)) {
return "La contraseña debe tener al menos una letra mayúscula";
}
else if (!/[a-z]/.test(password)) {
return "La contraseña debe tener al menos una letra minúscula";
}
else if (!/[0-9]/.test(password)) {
return "La contraseña debe tener al menos un número";
}
else if (!/[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password)) {
return "La contraseña debe tener al menos un caracter especial";
}
else {
return "";
}
}
submit() {
const username = this.usernameController.value;
const password = this.passwordController.value;
console.log("Username: " + username);
console.log("Password: " + password);
}
async init(): Promise<void> {
this.usernameController.value = "admin";
this.passwordController.value = "admin"
}
build(_: Context): Widget<any> | null {
return new Center({
child: new Container({
style: new ContainerStyle({
backgroundColor: Color.gray().opacity(0.5),
width: Size.px(300),
padding: Size.px(10),
boxShadow: [
new BoxShadow({
color: Color.black().opacity(0.5),
hOffset: Size.px(4),
vOffset: Size.px(4),
blur: Size.px(10),
})
],
css: Css.fromJson({
"border-radius": "6px",
"padding": "30px 20px",//Esta funcionando mal
}),
}),
child: new Flex({
style: new FlexStyle({
direction: FlexDirection.column,
spacing: Size.px(10),
mainAxisSize: MainAxisSize.max
}),
children: [
new Text({
text: "Login",
textType: TextType.heading_2,
style: new TextStyle({
color: Color.white(),
textAlign: TextAlign.center,
fontSize: Size.px(30),
fontWeight: FontWeight.bolder,
})
}),
new TextField({
label: "Username",
name: "username",
style: this.styleTextField,
controller: this.usernameController,
autoValidate: AutoValidateMode.onChange,
validate: (value: string | any) => {
console.log("Username changed: " + value);
console.log("Username controller: " + this.usernameController.value);
},
}),
new TextField({
label: "Password",
name: "password",
style: this.styleTextField,
validation: (password: string | number | boolean) => {
return this.validatePassword(password as string);
},
autoValidate: AutoValidateMode.onChange,
controller: this.passwordController,
}),
new Center({
child: new FloatingButton({
onPressed: () => {
this.submit();
},
child: new Text({ text: "Login" }),
style: new ButtonStyle({
width: Size.extend(),
})
})
}),
new TextButton({
child: new Text({ text: "¿Olvidaste la contraseña?" }),
onPressed: () => {
console.log("Register pressed");
},
}),
]
}),
})
})
}
}
class App extends MaterialApp {
build(_: Context): Widget<any> | null {
return new Login({});
}
}
const app = new App();
app.run();
En este ejemplo completo, se crea un formulario de inicio de sesión con dos campos de texto (email y contraseña) y un botón para enviar el formulario. Se utilizan controladores para gestionar el estado de los campos y validar el formulario antes de enviarlo.
Nota
Como aun existe el componente Form, el AutoValidateMode.onSubmit no funciona.