vue-main-components
Instalacion
npm install vue-main-components
Dynamic form component
Uso
;
FormFieldTypes ofrece los siguientes componentes:
enum FormFieldTypes autocomplete = 'AutocompleteComponent' asyncAutocomplete = 'AsyncAutocompleteComponent' checkbox = 'CheckboxComponent' enum = 'EnumSelectComponent' radioGroup = 'RadioGroupComponent' select = 'SelectComponent'
Crear el objeto de configuracion de formulario
const userFieldsConfig: FormField = name: 'First name' key: 'first_name' component: FormFieldTypestextField defaultValue: 'Luis' options: placeholder: 'First name' name: 'Middle name' key: 'middle_name' component: FormFieldTypestextField defaultValue: '' options: placeholder: 'Middle name' name: 'Last name' key: 'last_name' component: FormFieldTypestextField defaultValue: '' options: placeholder: 'Last name' name: 'Email' key: 'email' component: FormFieldTypestextField defaultValue: '' options: placeholder: 'Email' ;
Controlador
;;;;@ public form!: DynamicFormComponent; public fieldsConfig: FormField = userFieldsConfig; public { thisform = this$refs'user-form' as DynamicFormComponent; } public async { const resp = await thisform; } public { thisform; }
El componente DynamicFormComponent recibe como propiedad obligatoria fieldsConfig, la cual se refiere a la configuracion de los campos del formulario. Es importante utilizar una referencia en la etiqueta del componente ya que esta nos permite acceder a algunos metodos como submit() y resetValidations().
Template
Dynamic Form Submit Reset validations