Módulo de Formulario Dinámico

El DynamicFormModule contiene el DynamicFormComponent y sus componentes hijos que permiten la creación sencilla de formularios simples.

Componentes

AmountRangeComponent y AmountRangeMultiComponent

Un componente para mostrar un campo de entrada de rango de cantidades y múltiples campos de entrada de rango de cantidades, respectivamente. El uso del último componente devolverá una lista de rangos de montos.

Nombre Descripción

@Input() amountTypeList: FieldOption[];

La lista de tipos de monto que se mostrarán en el menú desplegable de tipos de monto.

@Input() currencyCodeList: FieldOption[];

La lista de códigos de moneda que se mostrarán en el menú desplegable de códigos de moneda.

@Input() id;

El id del campo de entrada del rango de cantidad, el id se utiliza en múltiples lugares para formar ids únicos para pruebas. Por ejemplo, 'amount-'+ id +'-from-label' para el id de from-label.

AutocompleteComponent

Un componente que permite al usuario seleccionar un elemento de una lista utilizando autocompletado.

Nombre Descripción

@Input() id;

El id de la entrada de autocompletado, el id se utiliza en múltiples lugares para formar ids únicos para pruebas. Por ejemplo, 'autocomplete-'+ id +'-label' para el id de la etiqueta.

@Input() etiqueta;

La etiqueta que se mostrará encima de la entrada de autocompletado.

@Input() itemList: FieldOption[];

La lista de elementos que se mostrarán en el menú desplegable de autocompletado. Si una FieldOption está marcada como deshabilitada, entonces la opción no será seleccionable.

AutocompleteMultiComponent

Un componente que permite al usuario seleccionar múltiples elementos de una lista utilizando autocompletar.

Nombre Descripción

@Input() id;

El id de la entrada de autocompletado, el id se utiliza en múltiples lugares para formar ids únicos para pruebas. Por ejemplo, 'autocomplete-'+ id +'-etiqueta' para el id de la etiqueta.

@Input() etiqueta;

La etiqueta que se mostrará encima del campo de entrada de autocompletado.

@Input() itemList: FieldOption[];

La lista de elementos que se mostrarán en el menú desplegable de autocompletado. Si una FieldOption está marcada como deshabilitada, entonces la opción no será seleccionable.

@Input() opciones: AutocompleteModel;

Este input se utiliza para definir las propiedades adicionales del componente, en este caso, permitiendo custom inputs o la funcionalidad de seleccionar todo

DynamicFormComponent

Un componente para ayudar con la creación de formularios simples que contiene los componentes de entrada ipf.

Nombre Descripción

@Input() listaSeccionesFormulario: FormSection[]

La lista de secciones del formulario que se mostrarán. Una FormSection es un grupo de campos de formulario que aparecen dentro de su propio div colapsable. Una sección es solo para fines de visualización y se enviará como parte del envío principal del formulario.

@Input() formValues: { [key: string]: any };

Los valores iniciales del formulario. Este es un objeto donde la clave es el nombre del campo y el valor es el valor del campo.

@Input() expand: boolean;

Si las secciones del formulario deben ser ampliadas o no. Por defecto es verdadero.

@Input() submitText: string;

El texto que se mostrará en el botón de enviar. Si el submitText está vacío, entonces el botón de enviar no se mostrará en la plantilla.

@Input() resetText: string;

El texto que se mostrará en el botón de reinicio. Si el resetText está vacío, entonces el botón de reinicio no se mostrará en la plantilla.

@Input() acciones: FormAction[];

Una lista de acciones. Cuando se suministra una acción, aparecerá en la parte inferior derecha del formulario como un botón. Cuando se hace clic en el botón, la acción será emitida. Consulte la salida de actionClick a continuación.

@Input() errores: FormErrors;

Un objeto de errores de formulario. Cuando se proporcionan los errores, aparecerán junto al campo que se suministra como clave; si no hay un campo coincidente para la clave, entonces aparecerán en la parte inferior del formulario. Ejemplo

{
 cadena: ['Esto es obligatorio', 'Esto debe ser una cadena']
}

@Output() formSubmit: EventEmitter<{ [clave: cadena]: cualquier }>;

An event que se emite cuando se envía el formulario. El event contendrá los valores del formulario.

@Output() formReset: EventEmitter<null>;

An event que se emite cuando se restablece el formulario.

@Output() actionClick: EventEmitter<FormActionEvent>;

An event que se emite cuando se hace clic en una acción con el id de la acción como el event valor. p. ej.{ actionId: 'action-id-that-was-supplied' }.

DynamicSearchFormComponent

Un componente para crear un formulario de búsqueda básico

Nombre Descripción

@Input() listaSeccionesFormulario: FormSection

La sección del formulario que se mostrará. Una FormSection es un grupo de campos de formulario que aparecen en el formulario de búsqueda.

@Input() formValues: { [key: string]: any }

Los valores iniciales del formulario. Este es un objeto donde la clave es el nombre del campo y el valor es el valor del campo.

@Input() submitText: string

El texto que se mostrará en el botón de enviar.

@Input() resetText: cadena

El texto que se mostrará en el botón de reinicio. Si el resetText está vacío, entonces el botón de reinicio no se mostrará en la plantilla.

@Input()customActions: CustomActions[]

Una lista de custom acciones que mostrarán un botón adicional que despachará la acción dada al hacer clic.

@Input()customValidator?: CustomValidation;

Esto se utiliza para proporcionar el formulario con custom validación. Por ejemplo, si la validez de dos campos de formulario se basa en el valor del otro.

CustomComponent(WIP)

Si desea agregar un custom componente al formulario, usted puede añadir el customComponent propiedad al FormField dentro de la formSectionList

Nombre

Descripción

componente

El componente que desea inyectar en el formulario

formControl

El control de formulario que debe asociarse con ese componente

entradas: FormInputs[]

Un array de valores de entrada que se utiliza para proporcionar cualquier entrada para eso custom componente

Custom Acción

Este objeto se utiliza para definir el custom acción que debe ser añadida al formulario.

Nombre

Descripción

acción

Esta es la acción que se enviará al hacer clic en el custom acción. Es del tipo Action de ngrx

título

El texto que se utilizará en el custom botón de acción

estilo

Uno de 'primario', 'secundario' o 'advertencia'. Basado en la hoja de estilos proporcionada, esto estilizará el botón en consecuencia.

Custom Validación

Este objeto se utiliza para definir el custom validación de formularios

Nombre

Descripción

validador

Un ValidatorFn que se añadirá al formulario

errorText

El texto que se mostrará

DateRangeWithTypeComponent y DateRangeMultiComponent

Un componente para mostrar una entrada de rango de fechas con una lista de tipos y múltiples entradas de rango de fechas, respectivamente.

Nombre Descripción

@Input() id;

El id del campo de entrada del rango de fechas, el id se utiliza en múltiples lugares para formar ids únicos para pruebas. Por ejemplo, 'date-'+ id +'-from-label' para el id de from-label.

@Input() dateTypeList: FieldOption[];

La lista de tipos de fecha que se mostrarán en el menú desplegable de tipos de fecha. Este es un enum creado por el abierto api docs.

DateRangeComponent

Un componente para mostrar un campo de entrada de rango de fechas sin un menú desplegable de tipo de fecha.

Nombre Descripción

@Input() id;

El id del campo de entrada del rango de fechas, el id se utiliza en múltiples lugares para formar ids únicos para las pruebas. Por ejemplo, id + '-from-label' para el id de from-label.

DateInputComponent

Un componente para mostrar una entrada de fecha única con un selector de fecha.

Nombre Descripción

@Input() id;

El id de la entrada de fecha.

DynamicDialogComponent

Un componente de diálogo que funciona con el dynamicFormComponent para permitir la creación sencilla de un formulario simple que contenga los componentes de entrada ipf.

Nombre Descripción

Objeto de datos:

título: cadena;

El título del diálogo.

formSectionList: FormSection[];

La lista de secciones del formulario que se mostrarán. Una FormSection es un grupo de campos de formulario que aparecen dentro de su propio div colapsable. Una sección es solo para fines de visualización y se enviará como parte del envío del formulario principal.

formValues: { [clave: string]: cualquier };

Los valores iniciales del formulario. Este es un objeto donde la clave es el nombre del campo y el valor es el valor del campo.

submitText: cadena;

El texto que se mostrará en el botón de enviar. Si el submitText está vacío, entonces el botón de enviar no se mostrará en la plantilla.

resetText: cadena;

El texto que se mostrará en el botón de reinicio. Si el resetText está vacío, entonces el botón de reinicio no se mostrará en la plantilla.

SelectMultiComponent

Un componente utilizado para cualquier campo donde se necesita un campo de selección y hasta dos campos de entrada. El campo de selección es siempre obligatorio y los campos de entrada se establecen como obligatorios a través de las opciones.

Nombre Descripción

@Input() id;

El id del componente, utilizado con fines de prueba para definir los selectores de elementos.

@Input() itemList: FieldOption[];

La lista de elementos que se mostrarán en el menú desplegable.

@Input() opciones: SelectMultipleModel;

Este input se utiliza para definir las propiedades adicionales del componente, en este caso, determinando el número de entradas, la longitud máxima, si los campos son obligatorios, numéricos o de texto y las etiquetas para los campos.

Ejemplo de opciones (SelectMultipleModel):

{
    singleInput: false,
    input: {
        label: 'input 1',
        numeric: false,
        required: true
    },
    selectLabel: 'select label',
    secondaryInput: {
        label: 'input 2',
        numeric: true,
        required: false
    },
    secondarySelectInput: {
        label: 'select 2',
        numeric: false,
        required: false
    },
    secondaryOptionList: [
        { value: 'GBP', description: 'GBP' },
        { value: 'USD', description: 'USD' },
        { value: 'EUR', description: 'EUR' }
    ],
    maxLength: 5
}

MultiTextComponent

Un componente utilizado para proporcionar múltiples valores de texto que se generan como un arreglo de cadenas.

Nombre Descripción

@Input() id: cadena;

El id del componente, utilizado con fines de prueba para definir los selectores de elementos.

@Input() etiqueta: string;

La etiqueta utilizada para el componente

@Input() opciones: MultiTextInputModel;

Este input se utiliza para definir las propiedades adicionales del componente, en este caso, el marcador de posición para la entrada y el ícono utilizado para la eliminación de los elementos.

Opciones de ejemplo (MultiTextInputModel):

{
   inputText: 'Enter an Address Line',
   icon: 'close'
}

GuardedFormComponent

Una clase base que puede ser extendida para permitir el uso de PendingChangesGuard.

En circunstancias donde los datos del usuario pueden perderse al navegar fuera de un formulario, el componente debe extender el GuardedFormComponent y se debe añadir el PendingChangesGuard a la ruta.

Se mostrará un mensaje de advertencia pidiendo al usuario que confirme la navegación si el formulario tiene alguna entrada. El ignoreNextDeactivate La propiedad debe establecerse en verdadero si se permite la navegación fuera del formulario sin una advertencia o confirmación, por ejemplo, cuando el formulario ha sido guardado/enviado.

class CreateFormComponent extends GuardedFormComponent {
    onSubmit() {
        this.store.dispatch(
            Actions.userCreate({})
        )
        // Set ignoreNextDeactivate to true as the form has been submitted and no warning is required upon leaving the page
        this.ignoreNextDeactivate = true;
    }
}

Guardias

PendingChangesGuard

Un guardia que previene la navegación si se pueden perder datos del usuario.

El PendingChangesGuard se puede aplicar a cualquier ruta hacia componentes que extiendan el GuardedFormComponent.

Se mostrará un mensaje de advertencia y un cuadro de diálogo de confirmación si el formulario tiene entradas a menos que component.ignoreNextDeactivate es cierto.

const routes: Routes = [
    {
        path: 'create',
        component: CreateFormComponent,
        canDeactivate: [PendingChangesGuard]
    }
]

Tuberías

StringToFieldOptionPipe

Una tubería para convertir una cadena en un FieldOption.

Al desarrollar, a menudo tenemos una lista de enums generada a partir de la api documentos que deseamos ofrecer al usuario como un menú desplegable. Este pipe nos permite convertir el enum a un FieldOption para que pueda ser utilizado en el DynamicFormModule. El enum se mantiene en su valor original para el atributo 'value', pero se formatea en minúsculas para el atributo 'description'.

Entrada Salida

['PRUEBE_ESTO']

[{value: 'TEST_THIS', description: 'Test This'}]