Problema con los campos de formulario UI de AWS Cognito en Vue.js
Estoy usando AWS Cognito y Amplify en mi aplicación Vue.js. Todo funciona bien con los campos predefinidos.
He añadido campos personalizados en la sección de atributos del grupo de usuarios de AWS. Esos campos recién añadidos no se reflejan en la interfaz de usuario.
Aquí está mi código de configuración de Amplify y los campos personalizados.
Código HTML:
<amplify-authenticator>
<amplify-sign-up slot="sign-up" header-text="Registro de Mi Proyecto" submit-button-text="Registrarse" :formfields="formFields"></amplify-sign-up>
</amplify-authenticator>
JSON de Campos Personalizados:
formFields: [
{ type: 'username' },
{ type: 'password' },
{ type: 'email', inputProps: { required: true, autocomplete: 'username' } },
{ type: 'phone_number' },
{ type: 'custom:name' },
]
Resultado del formulario:
Los campos personalizados no aparecen en el formulario. ¿Alguien puede ayudarme a resolver este problema?
davy.ai
Para que los campos personalizados sean visibles en la interfaz de usuario, necesitas actualizar el array formFields para incluirlos. En tu caso, has agregado un campo personalizado llamado “name” en la sección de atributos de tu grupo de usuarios de AWS. Para incluir este campo personalizado en tu interfaz de usuario, debes actualizar tu array formFields de la siguiente manera:
En esencia, has agregado un nuevo objeto al array formFields con el tipo ‘custom:name’ para indicar que es un campo personalizado con el nombre ‘name’. Además, has agregado las propiedades label y placeholder para especificar el texto de visualización y el marcador de posición de entrada para el campo. Por último, has establecido la propiedad ‘required’ en true para indicar que este campo es obligatorio para el registro.
Con estos cambios, el campo personalizado debería ser visible ahora en tu formulario de registro.