1 Componentes relativos a formularios
- 1.1 Character count
- 1.2 Checkboxes
- 1.3 Date-input
- 1.4 Error Message
- 1.5 FieldSet
- 1.6 File Upload
- 1.7 Hint
- 1.8 Input
- 1.9 Input-group
- 1.10 Label
- 1.11 Legend
- 1.12 Radios
- 1.13 SearchBar
- 1.14 Select
- 1.15 Textarea
- 1.16 Tree
- 1.17 Accesibilidad
2 Uso de los directivas de los formularios
- 2.1 ConditionDirective

Componentes relativos a formularios

Los componentes que el usuario pueda introducir un valor, podra ser implementado con:

En formularios manejados por plantillas (Template-driven Forms), vinculando el dato mediante ngModel.
En formularios reactivos (Reactive Forms), indicando el nombre del control mediante el atributo formControlName.

Vamos a ver como se usa cada uno de los componentes.

Character count

<desy-character-count ... ></desy-character-count>

Permite representar una entrada de texto largo con límite de caracteres o palabras, indicando la cantidad restante.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del textarea.	Si
name	string	Nombre o atributo name del textarea.	Si
maxlength	number	Número máximo de caracteres.	Sí, cuando no se especifica maxwords.
countbbdd	boolean	Indica si se debe limitar el texto a introducir teniendo en cuenta el peso que pueden tener los caracteres especiales en base de datos.
maxwords	number	Número máximo de palabras. Sólo se aplica si no se ha especificado la propiedad maxlength.	Sí, cuando no se especifica maxlength.
threshold	number	Umbral de texto introducido a partir del cual se mostrará el texto con los caracteres/palabras restantes. Si no se especifica, este texto se mostrará siempre.
placeholder	string	Texto a mostrar de ejemplo antes de introducir texto.
labelText	string	Título o etiqueta. Puede especificarse utilizando una de las siguientes opciones: labelText: texto de título. labelData: objeto que contiene toda la información de un componente Label. labelRef: tag de un ng-template que contenga un componente Label. Si se especifican varias, se aplicará la opción que admite mayor personalización: labelRef → labelData → labelText.	Si
labelData	LabelData
labelRef	TemplateRef <LabelComponent>
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente Hint. hintRef: tag de un ng-template que contenga un componente Hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintRef → hintData → hintText.
hintData	HintData
hintRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage. errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>
classes	string	Clases a aplicar sobre la entrada de texto.
formGroupClasses	string	Clases del grupo que contiene el título, la descripción, el mensaje de error y la entrada de texto.
countMessageClasses	string	Clases a aplicar sobre el texto con los caracteres/palabras restantes.
disabled	booelean	Permite deshabilitar el componente. Nota: si se utilizan formularios reactivos, es preferible no utilizar este parámetro y gestionarlo desde el FormControl.

Propiedades de accesibilidad

El componente admite los parámetros de accesibilidad.

Ejemplo básico, utilizando ngModel

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCharacterCountComponent {
	...
	value: string;
	...
}

<desy-character-count id="id" [(ngModel)]="value" classes="w-100" labelText="Título" hintText="Introduce un texto largo." errorMessageText="El texto introducido es inválido"
    [countbbdd]="true" [maxlength]="100" [threshold]="75"></desy-character-count>

Ejemplo completo, utilizando formControlName

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Checkboxes

Permite representar un listado de checkboxes.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
idPrefix	string	Prefijo para identificar los ítems, si no vienen identificados. Si no se especifica se usa name.
name	string	Atributo name de cada checkbox item.	si
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
formGroupClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el form group.
hasDividers	boolean	Determinar si se muestran lineas divesoras entre los items.
items	ItemCheckboxData[]	Objeto con la información de cada checkbox item. Admite double binding, ya que internamente se puede modificar el valor de checked.	si
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: Componente Fieldset como contenido (ver sección contenido). fieldsetData: Objeto que contiene toda la información del componente Fieldset legendRef: tag de un ng-template que contenga un componente legend legendData: objeto que contiene toda la informaicón del componente legend legendText: tengo de la legenda Si se especifican varias, se aplicará la opción que admite mayor personalización: fieldsetComponent → fieldsetData → legendRef→ legendData→ legendText.
legendRef	TemplateRef <LegendComponent>
legendData	LegendData
legendText	string
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: Componente Hint como contenido (ver sección contenido). hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. hintRef: tag de un ng-template que contenga un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintComponent → hintRef → hintData → hintText.
hintData	HintData
hintRef	TemplateRef <LabelComponent>
errorMessageText	string	Mensaje de error. Puede especificarse utilizando una de las siguientes opciones: Componente ErrorMessage como contenido (ver sección contenido). errorMessageText: texto del mensaje de error. errorMessageData: objeto que contiene toda la información de un componente errorMessage. errorMessageRef: tag de un ng-template que contenga un componente errorMessage. Si se especifican varias, se aplicará la opción que admite mayor personalización: errorMessageComponent → errorMessageRef → errorMessageData → errorMessageText.
errorMessageData	ErrorMessageData
errorMessageRef	TemplateRef <ErrorMessageComponent>

ItemCheckboxData

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto de ayuda en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
id	string	Identificador del ítem.
value	string	Valor del ítem.	si
labelData	LabelData	Objeto que contiene toda información del componente label. Solo se aplicarán los atributos y clases css.
hintText	string	Descripción de ayuda. Puede especificarse utilizando una de las siguientes opciones: hintText: texto de ayuda. hintData: objeto que contiene toda la información de un componente hint. Si se especifican varias, se aplicará la opción que admite mayor personalización: hintData → hintText.
hintData	HintData
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el ítem.
checked	boolean	Determina si está marcado.
indeterminateChecked	boolean	Determina si está en estado indeterminado (estado visual intermedio que no corresponde ni a marcado ni a desmarcado)
disabled	boolean	Determina si está activo
isIndeterminated	boolean	Indica si admite un estado visual intermedio que no corresponde ni a marcado ni a desmarcado. Se suele utilizar cuando existen otros campos de tipo checkbox dependientes del ítem y se quiere representar que se han marcado sólo algunos de ellos.
conditional	boolean	Determina si tiene una condición. Para implementar la template a mostrar, se usa la directiva Condition

Propiedades de accesibilidad

El componente e ItemCheckboxData admite los siguientes parámetros de accesibilidad.

Se permite proyectar contenido dentro de checkboxes para facilitar su uso. Admite los siguientes componentes:

FieldsetComponent

<desy-fieldset>...</desy-fieldset>

Permite especificar las propiedades del fieldset. No se debe especificar el caller de este componente, ya que se sobrescribirá internamente.

LegendComponent

<desy-legend>...</desy-legend>

Si no se especifica el componente fieldset, se puede utilizar para incorporar el título.

HintComponent

<desy-hint>...</desy-hint>

Permite especificar la descripción de ayuda. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

ErrorMessageComponent

<desy-error-message>...</desy-error-message>

Permite especificar el mensaje de error. Se ignorará el parámetro id, ya que se sobrescribirá internamente.

CheckboxItemComponent

<desy-checkbox-item ...>...</desy-checkbox-item>

Permite especificar cada checkbox. Admite los mismos parámetros que ItemCheckboxData. El parámetro checked admite double-binding. El parámetro indeterminateChecked admite double-binding.

A su vez, este componente admite como contenido los componentes LabelComponent, HintComponent y ContentComponent. Este último permite especificar el contenido condicional que se mostrará al seleccionar el checkbox, siempre y cuando se especifice el parámetro conditional a true.

Si no se especifica el LabelComponent, el contenido (salvo los componentes HintContent y ContentComponent, si se especifican) será insertado dentro de un label de forma interna.

Evento	Tipo	Descripción

Evento

Tipo

Descripción

itemsChange

ItemCheckboxData[]

Se emite cada vez que se selecciona o deselecciona un checkbox, de forma que el valor de checked de cada item se devuelve actualizado en el evento.

Sólo se emite si se especifican los items como parámetro.

indeterminateChange

boolean

Se emite cada vez que se selecciona o deselecciona un checkbox, de forma que el valor de indeterminateChecked del item se devuelve actualizado en el evento.

Date-input

Permite introducir una fecha como un grupo de campos.

Puede ser utilizado:

En formularios manejados por plantillas (Template-driven Forms), vinculando el dato mediante ngModelGroup.
En formularios reactivos (Reactive Forms), indicando el nombre del control mediante el atributo formControlName.
Independientemente, vinculando el dato mediante ngModel.

Error Message

Permite representar un texto de error.

FieldSet

Genera una etiqueta fieldSet con su legenda y su template.

File Upload

Permite seleccionar un archivo del dispositivo

Hint

Permite representar un texto de ayuda.

Input

Permite representar una entrada de texto.

Input-group

Permite introducir un grupo de campos.

Puede ser utilizado:

En formularios manejados por plantillas (Template-driven Forms), vinculando el dato mediante ngModelGroup.
En formularios reactivos (Reactive Forms), indicando el nombre del control mediante el atributo formControlName.
Independientemente, vinculando el dato mediante ngModel.

Label

Genera un etiqueta html label

Legend

Genera una etiqueta legend.

Radios

Permite representar un listado de radio button.

SearchBar

Permite representar una barra de búsqueda.

Select

Permite representar un listado desplegable

Textarea

Permite representar una entrada de texto largo.

Tree

Permite representar un árbol con ítems seleccionables. El valor que gestiona es un listado (plano) con los valores de los items seleccionados.

Accesibilidad

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

Parámetro	Atributo de accesibilidad equivalente

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
ariaModal	aria-modal
tabindex	tabindex

Uso de los directivas de los formularios

Vamos a ver como se usa cada uno de las directivas.

ConditionDirective

Permite incluir una template para mostrarlo cuando se cumpla una condición. Usado en Radios y Checkboxes.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
item	ItemCheckboxData ItemRadioData	Item a checkear cupara mostrarlo	Si, si value y items no estan indicados.
value	string	Valor para mostrar la condición	si, si items esta indicado.
items	ItemCheckboxData[] ItemRadioData[]	Array de todos ítems posibles	si, si value esta indicado.

Área de empleados públicos e Integradores

desy-angular v5.1 - Manual de integración DesyFormsModule