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.

Propiedades de entrada

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.

Ejemplos

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

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoCharacterCountComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('', [Validators.required])
    });
	...
}

HTML utilizando labelText, hintText y errorMessageText

<desy-character-count id="identificador" classes="w-100" formControlName="valueFormControl" [maxwords]="15"
		labelText="Título"
		hintText="Introduce un texto largo (15 palabras como máximo)."
		[errorMessageText]="!form.valid ? 'Soy obligatorio' : null"></desy-character-count>

HTML utilizando labelData, hintData y errorMessageData

<desy-character-count id="identificador" classes="w-100" formControlName="valueFormControl" [maxwords]="15"
		labelData="{text: 'Título', ...}"
		hintText="{text: 'Introduce un texto largo (15 palabras como máximo).', ...}"
		[errorMessageData]="!form.valid ? {text: 'Soy obligatorio'} : null"></desy-character-count>

HTML utilizando labelRef, hintRef y errorMessageRef

<desy-character-count labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate" [maxwords]="15">
	<ng-template #labelTemplate>
        <desy-label text='Título' ...></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Introduce un texto largo (15 palabras como máximo).' ...></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message [text]="!form.valid ? {text: 'Soy obligatorio'} : null"  ...></desy-error-message>
	</ng-template>
</desy-character-count>

Checkboxes

<desy-checkboxes  ... >...</desy-checkboxes>

Permite representar un listado de checkboxes.

Propiedades de entrada

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
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.
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.

Contenido

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.

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.

Eventos de salida

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.

Ejemplos

Ejemplo con contenido y NgModel

Componente

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

HTML

<desy-checkboxes [(ngModel)]="valueContent" [idPrefix]="'example-content'" [name]="'checkboxNgModel'" [classes]="'flex'">
	<desy-fieldset [legendText]="'Ejemplo con contenido'"></desy-fieldset>
	<desy-hint>Selecciona una o varias opciones</desy-hint>
	<desy-error-message *ngIf="!valueContent || valueContent.length === 0">Debes seleccionar al menos una opción</desy-error-message>
	<desy-checkbox-item [value]="'opcion1'" [conditional]="true">
		<desy-label>Opción 1</desy-label>
		<desy-hint>Tiene contenido condicional</desy-hint>
		<desy-content>Contenido condicional</desy-content>
	</desy-checkbox-item>
	<desy-checkbox-item [value]="'opcion2'">
		Opcion 2
		<desy-hint>No se especifica label</desy-hint>
	</desy-checkbox-item>
</desy-checkboxes>

Ejemplo con parámetros y NgModel

Componente

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

HTML

<desy-checkboxes [(ngModel)]="value" idPrefix="example" name="checkboxNgModel"
                 [items]="[{'value': 'british', 'text': 'British'}, {'value': 'irish', 'text': 'Irish'}, {'value': 'other', 'text': 'Citizen of another country'}]"
                 legendText="What is your nationality?"
                 hintText="If you have dual nationality, select all options that are relevant to you."></desy-checkboxes>

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

Date-input

<desy-date-input  ... ></desy-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.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del grupo	Sí
disabled	boolean	Indica si el item está deshabilitado
namePrefix	string	Prefijo común a todos los ítems. Si no se especifica se usa name. Nota: Si se utiliza en un formulario manejado por plantilla y se modifica este valor tras inicializarse, no se verá reflejado.
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.
items	ItemDateInputData[]	Objeto con la información de cada date item.	si
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: 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: 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: 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>

ItemDateInputData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del ítem.
name	string	Nombre del ítem. Nota: Si se utiliza en un formulario manejado por plantilla y se modifica este valor tras inicializarse, no se verá reflejado.	Sí
value	string	Valor del ítem.
labelData	LabelData	Objeto que contiene toda información del componente label. Solo se aplicarán los atributos y clases css.	Sí
labelText	string	Valor de la leyenda
disabled	boolean	Indica si está habilitado
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el ítem.
divider	ItemDividerDateInputData	Indica el divisor entre componentes. Puede ser html o texto
maxLenght	number	Número maximo de caracteres
autocomplete	string	Atributo autocomplete.
pattern	string	Patrón que deberá cumplir el valor para considerarse válido.
hasErrors	boolean	Permite indicar externamente si el campo tiene un error.

Propiedades de accesibilidad

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

Contenido

Se permite proyectar contenido dentro del date-input para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

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 indicar un texto de ayuda en el componente

Este componente se encuentra en el módulo DesyFormsModule.

ErrorMessageComponent

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

Permite indicar un mensaje de error en el componente

Este componente se encuentra en el módulo DesyFormsModule.

DateInputDayComponent

<desy-input-day>...</desy-input-day>

Permite indicar un día en el componente. Admite los mismos parámetros de entrada que el objeto ItemDateInputData, a excepción de labelData.

Se debe incorporar un componente label como contenido para especificar el título.

DateInputMonthComponent

<desy-input-month>...</desy-input-month>

Permite indicar un mes en el componente. Admite los mismos parámetros de entrada que el objeto ItemDateInputData, a excepción de labelData.

Se debe incorporar un componente label como contenido para especificar el título.

DateInputYearComponent

<desy-input-year>...</desy-input-year>

Permite indicar un año en el componente. Admite los mismos parámetros de entrada que el objeto ItemDateInputData, a excepción de labelData.

Se debe incorporar un componente label como contenido para especificar el título.

Ejemplos

Ejemplo con contenido y ngModel

<desy-date-input id="withNgModelAndContent" [(ngModel)]="value">
  <desy-legend>Fecha de nacimiento</desy-legend>
  <desy-hint>Por ejemplo, 31 3 1980</desy-hint>
  <desy-error-message>Debes rellenar todos los campos</desy-error-message>
  <desy-input-day [name]="'day'" [classes]="'w-14'" [maxlength]="2">
    <desy-label>Día</desy-label>
  </desy-input-day>
  <desy-input-month [name]="'month'" [classes]="'w-14'" [maxlength]="2">
    <desy-label>Mes</desy-label>
  </desy-input-month>
  <desy-input-year [name]="'year'" [classes]="'w-20'" [maxlength]="4">
    <desy-label>Año</desy-label>
  </desy-input-year>
</desy-date-input>

Ejemplos con NgModel y Template Driven

Componente

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

HTML con campo independiente

<desy-date-input id="withNgModel" [(ngModel)]="value" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980"></desy-date-input>

HTML con campo utilizado en un formulario dirigido por plantilla

<form class="form" #tdForm="ngForm">
      <desy-date-input id="tdDate" ngModelGroup="tdDate" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980"></desy-date-input>
</form>

Ejemplo con Reactive form

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDateInputComponent {
	...	
    form = new FormGroup({
      date: new FormGroup({
        day: new FormControl(),
        month: new FormControl(),
        year: new FormControl()
      })
    });
	...
}

HTML

<form class="form" [formGroup]="form">
      <desy-date-input id="withReactiveForm" [items]="formItems" formGroupName="date" legendText="Fecha de nacimiento" hintText="Por ejemplo, 31 3 1980" errorMessageText="El año es obligatorio"
                       [items]="[{name: 'day', classes: 'w-14', maxlength: 2},
                                 {name: 'month', classes: 'w-14', maxlength: 2},
                                 {name: 'year', classes: 'w-20', maxlength: 4, hasErrors: true}]"></desy-date-input>
</form>

Error Message

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

Permite representar un texto de error.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del texto.
text	string	Contenido del texto de error en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto de ayuda en formato HTML.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
visuallyHiddenText	string	Un prefijo visualmente oculto que se usa antes del mensaje de error. El valor predeterminado es "Error"

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Error message con entrada de texto

<desy-error-message text="Error message about full name goes here"></desy-error-message>

Error message con contenido

<desy-error-message>Error-message with <strong>HTML</strong></desy-error-message>

FieldSet

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

Genera una etiqueta fieldSet con su legenda y su template.

Propiedades de entrada

Propiedad	Tipo	Descripción
id	string	Identificador
caller	TemplateRef <any>	Template para mostrar dentro del fieldset
headingLevel	number	Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior. Por defecto equivale a 1.
legendRef	TemplateRef <LegendComponent>	Legenda. Puede especificarse utilizando una de las siguientes opciones: legendText: texto de legenda. legend: objeto que contiene toda la información de un componente legend. legendTmp: tag de un ng-template que contenga un componente label. Si se especifican varias, se aplicará la opción que admite mayor personalización: legendTmp → legend → legendText.
legendData	Objeto Legend
legendText	string

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby
errorId	aria-errormessage

Contenido

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

LegendComponent

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

Permite especificar el texto de legenda.

ContentComponent

<desy-content>...</desy-content>

Permite especificar el contenido a incluir dentro del fieldset.

Ejemplos

HTML utilizando legendText

<desy-fieldset id="identificador" classes="p-base bg-warning-light" 
		legendText="What is your phone number?"
		caller="callerRef"></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

Fieldset utilizando contenido en la leyenda

<desy-fieldset id="identificador" classes="p-base bg-warning-light" 
		caller="callerRef"><i>Legend</i> with <strong>HTML</strong></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

HTML utilizando legendData

<desy-fieldset id="identificador"
		legendData="{text: 'What is your phone number?', isPageHeading: true, classes: 'c-h1 mb-sm'}"
		caller="callerRef"></desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

HTML utilizando legendRef

<desy-fieldset id="identificador" legendRef="legendRef" caller="callerRef">
	<ng-template #legendRef>
        <desy-legend text='What is your phone number?' isPageHeading="true" classes="c-h1 mb-sm"></desy-legend>
	</ng-template>
</desy-fieldset>
  
<ng-template #callerRef>
  <label class="block" for="contact-phone">Phone number</label>
  <input class="c-input form-input mt-sm" name="contact-phone" type="text" id="contact-phone" [(ngModel)]="phone">
</ng-template>

File Upload

<desy-file-upload  ... ></desy-file-upload>

Permite seleccionar un archivo del dispositivo

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del select.	Si
name	string	Nombre o atributo name del select.	Si
value	File	Archivo
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.
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.
accept	string	Formatos de archivo que se aceptan

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby

Ejemplos

Ejemplo básico, utilizando ngModel

Componente

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

HTML

<desy-file-upload id="identificador" name="nombre" labelText="Sube un archivo" [(ngModel)]="value"></desy-file-upload>

Ejemplo completo, utilizando formControlName

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoFileUploadComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
}

HTML utilizando labelText, hintText y errorMessageText

<desy-file-upload id="file-upload-3" name="file-upload-3" formControlName="valueFormControl"
		labelText="Sube un archivo"
		hintText="Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
		errorMessageText="Error: Error message goes here"></desy-file-upload>

HTML utilizando labelData, hintData y errorMessageData

<desy-file-upload id="file-upload-3" name="file-upload-3" formControlName="valueFormControl"
		[labelData]="{text: 'Sube un archivo'}"
		[hintData]="{text: 'Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.'}"
		[errorMessageData]="{text: 'Error: Error message goes here'}"></desy-file-upload>

HTML utilizando labelRef, hintRef y errorMessageRef

<desy-file-upload [labelRef]="labelTemplate" [hintRef]="hintTemplate" [errorMessageRef]="errorMessageTemplate" id="file-upload-3" name="file-upload-3" formControlName="valueFormControl">
	<ng-template #labelTemplate>
        <desy-label text="Sube un archivo"></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text="Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text="Error: Error message goes here"></desy-error-message>
	</ng-template>
</desy-file-upload>

Hint

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

Permite representar un texto de ayuda.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del texto de ayuda.
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 de ayuda en formato HTML.	Si, cuando no se especifica text.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Hint con entrada de texto

<desy-hint text="It’s on your DNI, the last letter. For example, ‘A’."  ariaLabel="Prueba del componente hint con texto"></desy-hint>

Hint con entrada HTML

<desy-hint html="It’s on your DNI, <strong class='font-bold'>the last letter</strong>. For example, ‘A’."  ariaLabel="Prueba del componente hint con texto"></desy-hint>

Hint con entrada de contenido

<desy-hint ariaLabel="Prueba del componente hint con texto">Esto es un hint <strong>con html</strong></desy-hint>

Input

<desy-input  ... ></desy-input>

Permite representar una entrada de texto.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del input.	Si
name	string	Nombre o atributo name del input.	Si
type	string	Tipo de entrada. Equivale al atributo type del elemento input. Por defecto equivale a text.
inputmode	string	Teclado virtual que se deberá mostrar para facilitar la entrada de texto. Equivale al atributo inputmode del elemento input. Por defecto equivale a text.
maxlength	number	Número máximo de caracteres que debe admitir para considerarse válido. El texto sigue admitiendo más caracteres.
pattern	string	Patrón que debe cumplir el texto para considerarse válido.
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.
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 siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby
errorId	aria-errormessage

Ejemplos

Ejemplo básico, utilizando ngModel

Componente

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

HTML

<desy-input id="id-input" name="name-input" labelText="Título" hintText="Escribe el texto" placeholder="Texto de ejemplo" [(ngModel)]="value"></desy-input >

Ejemplo completo, utilizando formControlName

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoInputComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
}

HTML utilizando labelText, hintText y errorMessageText

<desy-input id="id-input" name="name-input" classes="w-100" formControlName="valueFormControl"
        type="number" inputmode="numeric"
		labelText="Título"
		hintText="Escribe un número"
		errorMessageText="El campo no puede estar vacío"></desy-input>

HTML utilizando labelData, hintData y errorMessageData

<desy-input id="id-input" name="name-input" classes="w-100" formControlName="valueFormControl"
        type="number" inputmode="numeric"
		labelData="{text: 'Título'}"
		hintText="{text: 'Escribe un número'}"
		errorMessageText="{text: 'El campo no puede estar vacío'}"></desy-input>

HTML utilizando labelRef, hintRef y errorMessageRef

<desy-input id="id-input" name="name-input" labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate"
        type="number" inputmode="numeric">
	<ng-template #labelTemplate>
        <desy-label text='Título'></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Escribe un número'></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text='El campo no puede estar vacío'></desy-error-message>
	</ng-template>
</desy-input>

Input-group

<desy-input-group  ... ></desy-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.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del grupo.	Sí
namePrefix	string	Prefijo común a todos los ítems. Si no se especifica se usa name. Nota: Si se utiliza en un formulario manejado por plantilla y se modifica este valor tras inicializarse, no se verá reflejado.
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.
items	ItemInputGroupData[]	Objeto con la información de cada input group item. Cada ítem podrá ser: Un campo select, si se especifica isSelect con valor true y una lista de items en mediante la propiedad selectItems. Un elemento divisor, si no es un campo select y, además, tiene definida la propiedad divider. Un campo input, si no es un campo select ni un elemento divisor. Admite double-binding.	Sí
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: 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: 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: 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>

ItemInputGroupData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del ítem.
isSelect	string	Indica si el campo es un select. Si no se especifica o su valor es falso, si tiene especificado la propiedad divider será un elemento divisor; si no, será un campo Input.
selectItems	SelectItemData[]	En caso de ser un select, lista de ítems que lo componen.
type	string	Tipo de entrada. Equivale al atributo type del elemento input. Por defecto equivale a text. Nota: sólo aplica si es un campo input.
inputmode	string	Teclado virtual que se deberá mostrar para facilitar la entrada de texto. Equivale al atributo inputmode del elemento input. Por defecto equivale a text. Nota: sólo aplica si es un campo input.
maxlength	number	Número máximo de caracteres que debe admitir para considerarse válido. El texto sigue admitiendo más caracteres. Nota: sólo aplica si es un campo input.
divider	ItemDividerInputGroupData	Datos del elemento divisor. Nota: sólo aplica si es un elemento divisor.
name	string	Nombre del ítem. Nota: Si se utiliza en un formulario manejado por plantilla y se modifica este valor tras inicializarse, no se verá reflejado.	Sí
value	string	Valor del ítem.
labelData	LabelData	Objeto que contiene toda información del componente label. Solo se aplicarán los atributos y clases css.	Sí, si es un campo select o un campo input.
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.
autocomplete	string	Atributo autocomplete. Nota: sólo aplica si es un campo input.
pattern	string	Patrón que deberá cumplir el valor para considerarse válido. Nota: sólo aplica si es un campo input.

ItemDividerInputGroupData

Propiedad	Tipo	Descripción
text	string	Texto a mostrar en el elemento divisor
html	string	Html a mostrar en el elemento divisor.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el divisor.

Propiedades de accesibilidad

El componente e ItemInputGroupData admiten los siguientes parámetros de accesibilidad.

Contenido

Se permite proyectar contenido dentro de input-group para facilitar su uso. Para ello se facilitan los siguientes sub-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.

InputGroupInputComponent

<desy-input-group-input>...</desy-input-group-input>

Permite especificar un item de tipo input del listado. Admite los mismos parámetros que ItemInputGroupData, a excepción de divider. El parámetro value admite double-binding.

A su vez, este componente admite como contenido el componente LabelComponent.

InputGroupSelectComponent

<desy-input-group-select>...</desy-input-group-select>

Permite especificar un item de tipo select del listado. Admite los mismos parámetros que ItemInputGroupData, a excepción de divider y los relativos al tipo input. El parámetro value admite double-binding.

A su vez, este componente admite como contenido el componente LabelComponent y, como lista de opciones, componentes OptionComponent.

InputGroupDividerComponent

<desy-input-group-divider>...</desy-input-group-divider>

Permite especificar un elemento divisor entre los inputs. Admite los mismos parámetros que ItemDividerInputGroupData.

A su vez, este componente admite como contenido el texto o html que se utilizara como elemento divisor.

Eventos de salida

Evento	Tipo	Descripción
itemsChange	ItemInputGroupData[]	Se emite al modificarse internamente algun dato de alguno de los items del listado (por ejemplo, el valor). Puede utilizarse con double-binging en el parámetro items.

Ejemplos

Ejemplo con contenido y NgModel

<desy-input-group [id]="'example'" [(ngModel)]="value">
  <desy-legend>Documento de identidad</desy-legend>
  <desy-input-group-select [name]="'tipoDoc'" [classes]="'w-full lg:w-auto'" [formGroupClasses]="'mr-base'">
    <desy-label>Tipo</desy-label>
    <desy-option [value]="'1'">NIF</desy-option>
    <desy-option [value]="'2'">Pasaporte</desy-option>
  </desy-input-group-select>
  <desy-input-group-divider [classes]="'mr-base'">y</desy-input-group-divider>
  <desy-input-group-input [name]="'numDoc'" [classes]="'w-full lg:w-50'"
                          [placeholder]="'Ej: 28999876V'" [maxlength]="9">
    <desy-label>Número</desy-label>
  </desy-input-group-input>
</desy-input-group>

Ejemplo con parámetros y NgModel

Componente

@Component({
Añadir un subtítulo

  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoDateInputComponent {
	...
	value: any;
	items: ItemInputGroupData[] = [
    {
      labelText: 'Tipo',
      name: 'tipoDoc',
      classes: 'w-full lg:w-auto',
      formGroupClasses: 'mr-base',
      isSelect: true,
      hasErrors: false,
      selectItems: [
        {
          value: '1',
          text: 'NIF',
        },
        {
          value: '2',
          text: 'Pasaporte'
        }
      ]
    },
    {
      name: 'numDoc',
      labelText: 'Número',
      classes: 'w-full lg:w-50',
      placeholder: 'Ej: 28999876V',
      hasErrors: false
    }
  ];
  form = new FormGroup({
    date: new FormGroup({
      tipoDoc: new FormControl(),
      numDoc: new FormControl()
    })
  });
	...
}

HTML con campo independiente

<desy-input-group id="withNgModel" [(ngModel)]="value" legendText="Documento de identidad" [items]="items"></desy-input-group>

HTML con campo utilizado en un formulario reactivo

<desy-input-group id="withReactiveForm" formGroupName="date" legendText="Documento de identidad" [items]="items"></desy-input-group>

HTML con campo utilizado en un formulario dirigido por plantilla

<form class="form"  #tdForm="ngForm">
      <desy-input-group id="tdDate" ngModelGroup="tdDate" legendText="Documento de identidad" [items]="items"></desy-input-group>
</form>

Label

<desy-label ... ></desy-label>

Genera un etiqueta html label

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto 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.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
for	string	El valor del atributo for, el id de la entrada con la que está asociada la etiqueta.
isPageHeading	boolean	Indica si la etiqueta también actúa como encabezado de la página.
headingLevel	number	Indica el nivel del encabezado principal: 1=h1, 2=h2, etc. Los encabezados internos serán del nivel inmediatamente inferior. Por defecto equivale a 1.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad.

Ejemplos

Label con entrada de texto

<desy-label text="TSG number" [isPageHeading]="true" ariaLabel="Prueba del componente label con texto"></desy-label>

Label con contenido

<desy-label [isPageHeading]="true" ariaLabel="Prueba del componente label con HTML">Esto es un label <strong>con html</strong></desy-label>

Legend

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

Genera una etiqueta legend.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
text	string	Contenido del texto 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.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.
isPageHeading	boolean	Indica si la etiqueta también actúa como encabezado de la página.

Ejemplos

Hint con entrada de texto

<desy-legend text="What is your phone number?" classes="mb-sm"></desy-legend>

Radios

<desy-radios ...></desy-radios>

Permite representar un listado de radio button.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del radios
idPrefix	string	Prefijo para identificar los items, si no vienen identificados. Si no se especifica se usa name.
name	string	Atributo name de nada radio 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	ItemRadioData[]	Objeto con la información de cada item radio.	si
fieldsetData	FieldsetData	Fieldset con legend. Puede especificarse utilizando una de las siguientes opciones: 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: 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: 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>

ItemRadioData

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 radios
value	string	Valor del item	si
labelData	LabelData	Objeto que contiene toda ifnormaicón del componente label. Solo se aplicaran 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
divider	string	Texto para dividir los radio items. Por ejemplo “o”.	Si se especifica dividir, el resto de parámetros no son requeridos.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el item.
checked	boolean	Determina si esta checkeado
disabled	boolean	Determina si esta activo
conditional	boolean	Determina si tiene una condición. Para implemetnar la template a mostrar, se usa la directiva Condition

Propiedades de accesibilidad

El componente y ItemRadioData admite los siguientes parámetros de accesibilidad.

Contenido

Se permite proyectar contenido dentro de radios para facilitar su uso. Para ello se facilitan los siguientes sub-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.

RadioItemComponent

<desy-radio-item>...</desy-radio-item>

Permite especificar cada radio. Admite los mismos parámetros que ItemRadioData. El parámetro checked 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 radio, 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.

Ejemplos

Ejemplo con contenido y NgModel

Componente

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

HTML

<desy-radios [(ngModel)]="valueContent" [idPrefix]="'example-content'" [name]="'checkboxNgModel'" [classes]="'flex'">
	<desy-fieldset [legendText]="'Ejemplo con contenido'"></desy-fieldset>
	<desy-hint>Selecciona una o varias opciones</desy-hint>
	<desy-error-message *ngIf="!valueContent || valueContent.length === 0">Debes seleccionar al menos una opción</desy-error-message>
	<desy-checkbox-item [value]="'opcion1'" [conditional]="true">
		<desy-label>Opción 1</desy-label>
		<desy-hint>Tiene contenido condicional</desy-hint>
		<desy-content>Contenido condicional</desy-content>
	</desy-checkbox-item>
	<desy-radio-item [value]="'opcion2'">
		Opcion 2
		<desy-hint>No se especifica label</desy-hint>
	</desy-radio-item>
</desy-radios>

Ejemplo parámetros y NgModel

Componente

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

HTML

<desy-radios idPrefix="example" classes="flex" name="example" legendText="Have you changed your name?" hintText="This includes changing your last name or spelling your name differently."
    items="[{'value':'yes','text':'Yes','classes':'mr-sm'},{'value':'no','text':'No','classes':'mr-sm'}]" [(ngModel)]="value"></desy-radios>

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

SearchBar

<desy-search-bar ...></desy-search-bar>

Permite representar una barra de búsqueda.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del searchBar	Si
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. (no se recomienda esta opción) Si se especifican varias, se aplicará la opción que admite mayor personalización: labelRef → labelData → labelText.	Si
labelData	LabelData
labelRef	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.
buttonClasses	string	Clases del boton que contiene la barra de busqueda.
disabled	boolean	Permite deshabilitar el componente.
placeholder	string	Placeholder del input.

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby

Eventos de salida

Evento	Tipo	Descripción
clickEvent	DOM Event	Se emite al pulsar sobre el botón o hacer intro.

Contenido

Se permite insertar un componente Button como contenido del componente Searchbar. En este caso, no se mostrará el botón de búsqueda por defecto.

Ejemplos

Ejemplo básico, utilizando ngModel

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	value: string;
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

HTML

<desy-search-bar id="identificador" labelText="Búsqueda" [(ngModel)]="value" (clickEvent)="handleClickEvent($event)"></desy-search-bar>

Ejemplo utilizando un componente botón como contenido

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	value: string;
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

HTML

<desy-search-bar id="identificador" placeholder="Buscar en ..." [(ngModel)]="value" >
  <desy-button text="Buscar" classes="c-button--primary ml-sm" (clickEvent)="handleClickEvent($event)"></desy-button>
</desy-search-bar>

Ejemplo completo, utilizando formControlName

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSearchBarComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl()
    });
	...
	handleClickEvent(event: any): void {
	   ...
	}
}

HTML utilizando labelText y errorMessageText

<desy-search-bar id="identificador" (clickEvent)="handleClickEvent($event)"
        formControlName="valueFormControl"
		labelText="Búsqueda"
		errorMessageText="El texto introducido es inválido"></desy-search-bar>

HTML utilizando labelData, y errorMessageData

  <desy-search-bar id="identificador" (clickEvent)="handleClickEvent($event)"
               formControlName="valueFormControl"
               [labelData]="{text: 'Búsqueda'}"
               [errorMessageData]="{text: 'El texto introducido es inválido'}"></desy-search-bar>

HTML utilizando labelRef, y errorMessageRef

  <desy-search-bar [labelRef]="labelTemplate" [errorMessageRef]="errorMessageTemplate" id="identificador" (clickEvent)="handleClickEvent($event)">
    <ng-template #labelTemplate>
      <desy-label text="Búsqueda" classes="sr-only" for="searchbar"></desy-label>
    </ng-template>
    <ng-template #errorMessageTemplate>
      <desy-error-message text="El texto introducido es inválido"></desy-error-message>
    </ng-template>
  </desy-search-bar>

Select

<desy-select ...></desy-select>

Permite representar un listado desplegable

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del select.	Si
name	string	Nombre o atributo name del select.	Si
items	SelectItemData	Objetos que apareceran en el selector	Si
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.
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.
disabled	boolean	Permite deshabilitar el componente.

Objeto SelectItemData

Propiedad	Tipo	Descripción	Obligatorio
value	string	Valor de la opción.
text	string	Texto para la opción.	Si
selected	boolean	Permite seleccionar la opción.
disabled	boolean	Permite deshabilitar la opción.
hidden	boolean	Permite ocultar la opción.

Propiedades de accesibilidad

El componente y SelectItemData admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby

Contenido

Se permite proyectar contenido dentro del select para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

LabelComponent

<desy-label>...</desy-label>

Permite indicar un texto en el componente.

HintComponent

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

Permite indicar un texto de ayuda en el componente.

ErrorMessageComponent

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

Permite indicar un mensaje de error en el componente.

OptionComponent

<desy-option>...</desy-option>

Permite indicar una opción en el select del componente.

OptionGroupComponent

<desy-option-group>...</desy-option-group>

Permite agrupar opciones dentro del menú desplegable.

Admite las siguientes propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
label	string	Texto a mostrar en el grupo.
disabled	boolean	Permite deshabilitar el grupo y todas las opciones que contiene.

Admite un listado de componentes OptionComponent como contenido.

Ejemplos

Ejemplo con contenido y ngModel

<desy-select formControlName="valueFormControlContent" [id]="'id'" [name]="'ejemplo-select'">
  <desy-label>Ejemplo select</desy-label>
  <desy-hint>Ejemplo de uso del componente select</desy-hint>
  <desy-error-message [id]="'error-id'">Es obligatorio</desy-error-message>

  <!-- Placeholder -->
  <desy-option [disabled]="true" [hidden]="true" [selected]="true">Selecciona una opción</desy-option>

  <desy-option [value]="'op1'">Opción 1</desy-option>
  <desy-option [value]="'op2'">Opción 2</desy-option>
  <desy-option [disabled]="true" [value]="'op3'">Opción 3 - deshabilitada</desy-option>
  <desy-option [disabled]="true" [value]="'op4'">Opción 4 - oculta</desy-option>

  <desy-option-group [label]="optionGroup.label" [disabled]="optionGroup.disabled">
    <desy-option [value]="'g1'">Opcion 1</desy-option>
    <desy-option [value]="'g2'">Opcion 2</desy-option>
    <desy-option [value]="'g3'" [disabled]="true">Opcion disabled</desy-option>
    <desy-option [value]="'g4'" [hidden]="true">Opcion hidden</desy-option>
    <desy-option [value]="'g5'">Opcion 5</desy-option>
  </desy-option-group>
  <desy-option [value]="'extra'">Opción extra</desy-option>
</desy-select>

Ejemplo básico, utilizando ngModel

Componente

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

HTML

<desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]"
             [(ngModel)]="value"></desy-select>

Ejemplo completo, utilizando formControlName

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoSelectComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('option4')
    });
	...
}

HTML utilizando labelText, hintText y errorMessageText

<desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]" 
        formControlName="valueFormControl"
		labelText="Título"
		hintText="Elige una opción"
		errorMessageText="Texto de error"></desy-select>

HTML utilizando labelData, hintData y errorMessageData

  <desy-select id="identificador" name="nombre" [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]"
               formControlName="valueFormControl"
               [labelData]="{text: 'Título'}"
               [hintData]="{text: 'Elige una opción'}"
               [errorMessageData]="{text: 'Texto de error'}"></desy-select>

HTML utilizando labelRef, hintRef y errorMessageRef

  <desy-select [labelRef]="labelTemplate" [hintRef]="hintTemplate" [errorMessageRef]="errorMessageTemplate" id="identificador" name="nombre" 
  [items]="[{'value':'option1','text':'Opción 1'},{'value':'option2','text':'Opción 2'},{'value':'option3','text':'Opción 3'},{'value':'option4','text':'Opción 4'}]">
    <ng-template #labelTemplate>
      <desy-label text="Título"></desy-label>
    </ng-template>
    <ng-template #hintTemplate>
      <desy-hint text="Elige una opción"></desy-hint>
    </ng-template>
    <ng-template #errorMessageTemplate>
      <desy-error-message text="Texto de error"></desy-error-message>
    </ng-template>
  </desy-select>

Textarea

<desy-textarea ...></desy-textarea>

Permite representar una entrada de texto largo.

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador del texarea.	Si
name	string	Nombre o atributo name del texarea.	Si
rows	number	Numero de columnas del texarea (por defecto 5)
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.
disabled	booleano	Booleano que determina si esta activo el texarea
autocomplete	string	Atributo autocomplete
maxlength	number	Numero maximo de longitud a introducir

Propiedades de accesibilidad

El componente admite los siguientes parámetros de accesibilidad. Este componente tiene personalizados los siguientes atributos.

Parámetro	Atributo de accesibilidad equivalente
describedBy	aria-describedby

Ejemplos

Ejemplo básico, utilizando ngModel

Componente

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

HTML

<desy-textarea id="identificador" [(ngModel)]="value" classes="w-100"></desy-textarea>

Ejemplo completo, utilizando formControlName

Componente

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoTextareaComponent {
	...
	form: FormGroup = new FormGroup({
      valueFormControl: new FormControl('Ejemplo de texto introducido por el usuario')
    });
	...
}

HTML utilizando labelText, hintText y errorMessageText

<desy-textarea id="identificador" classes="w-100" formControlName="valueFormControl"
		labelText="Título"
		hintText="Introduce un texto largo."
		errorMessageText="El texto introducido es inválido"></desy-textarea>

HTML utilizando labelData, hintData y errorMessageData

<desy-textarea id="identificador" classes="w-100" formControlName="valueFormControl"
		labelData="{text: 'Título', ...}"
		hintText="{text: 'Introduce un texto largo.', ...}"
		errorMessageText="{text: 'El texto introducido es inválido', ...}"></desy-textarea>

HTML utilizando labelRef, hintRef y errorMessageRef

<desy-textarea labelRef="labelTemplate" hintRef="hintTemplate" errorMessageRef="errorMessageTemplate">
	<ng-template #labelTemplate>
        <desy-label text='Título' ...></desy-label>
	</ng-template>
	<ng-template #hintTemplate>
        <desy-hint text='Introduce un texto largo.' ...></desy-hint>
	</ng-template>
	<ng-template #errorMessageTemplate>
        <desy-error-message text='El texto introducido es inválido'  ...></desy-error-message>
	</ng-template>
</desy-textarea>

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
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

<ng-template desyCondition ...>
              ...          
 </ng-template>

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

Propiedad	Tipo	Descripción	Obligatorio
item	/wiki/spaces/DESY/pages/2150301697 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	/wiki/spaces/DESY/pages/2150301697[] ItemRadioData[]	Array de todos ítems posibles	si, si value esta indicado.

Ejemplo con radios

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoConditionalComponent {
	...
	itemsContact: ItemRadioData[] = [{'value': 'phone', 'text': 'Phone', 'conditional': true},{'value': 'email', 'text': 'Email', 'conditional': true},{'value': 'text', 'text': 'Text message', 'conditional': true}];
	form: FormGroup = new FormGroup({
            valueFormControl: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.email]),
            phone: new FormControl(null, [Validators.minLength(9)]),
            phoneTxt: new FormControl(null, [Validators.minLength(9)]),
    });
	...
}

    <form [formGroup]="form">
      <desy-radios formControlName="valueFormControl"
                  legendText="How do you want to be contacted?"
                  [items]="itemsContact"
                   idPrefix="how-contacted"
                  name="how-contacted">

                    <ng-template desyCondition value="email" [items]="itemsContact">
                      <desy-input id="context-email" name="context-email" labelText="E-mail"  placeholder="ejemplo@email.es"  formControlName="email"></desy-input>
                    </ng-template>

                    <ng-template desyCondition value="phone" [items]="itemsContact">
                        <desy-input id="context-phone" name="contact-phone" labelText="Phone number" formControlName="phone"></desy-input>
                    </ng-template>  

                     <ng-template desyCondition value="text" [items]="itemsContact">
                        <desy-input id="contact-text-message" name="contact-text-message" labelText="Mobile phone number" formControlName="phoneTxt"></desy-input>
                    </ng-template>  
         
      </desy-radios>
    </form>

Ejemplo con checkboxes

@Component({
  selector: '...',
  templateUrl: '...',
  ...
})
export class DemoConditionalComponent {
	...
	itemsContact: ItemCheckboxData[] = [{'value': 'phone', 'text': 'Phone', 'conditional': true},{'value': 'email', 'text': 'Email', 'conditional': true},{'value': 'text', 'text': 'Text message', 'conditional': true}];
	form: FormGroup = new FormGroup({
            valueFormControl: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.email]),
            phone: new FormControl(null, [Validators.minLength(9)]),
            phoneTxt: new FormControl(null, [Validators.minLength(9)]),
    });
	...
}

<form [formGroup]="form">
  <desy-checkboxes formControlName="valueFormControl"
				   legendText="How do you want to be contacted?"
				   [items]="itemsContact"
				   idPrefix="how-contacted"
				   name="how-contacted">

	<ng-template desyCondition value="email" [items]="itemsContact">
	  <desy-input id="context-email" name="context-email" labelText="E-mail" [errorMessageData]="email.invalid ? {text: 'No es un email'} : null"  placeholder="ejemplo@email.es"  formControlName="email"></desy-input>
	</ng-template>

	<ng-template desyCondition value="phone" [items]="itemsContact">
	  <desy-input id="context-phone" name="contact-phone" labelText="Phone number" [errorMessageData]="phone.invalid ? {text: 'Longitud minima 9'} : null" formControlName="phone"></desy-input>
	</ng-template>

	<ng-template desyCondition [item]="itemsContact[2]">
	  <desy-input id="contact-text-message" name="contact-text-message" labelText="Mobile phone number" [errorMessageData]="phoneTxt.invalid ? {text: 'Longitud minima 9'} : null" formControlName="phoneTxt"></desy-input>
	</ng-template>
  </desy-checkboxes>
</form>

desy-angular v4.0 - Manual de integración DesyFormsModule

Componentes relativos a formularios

Character count

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Checkboxes

ItemCheckboxData

Ejemplo con contenido y NgModel

Componente

HTML

Ejemplo con parámetros y NgModel

Componente

HTML

Ejemplo con Formulario y condicionalesVer apartado ConditionDirective

Date-input

ItemDateInputData

Ejemplo con contenido y ngModel

Ejemplos con NgModel y Template Driven

Componente

HTML con campo independiente

HTML con campo utilizado en un formulario dirigido por plantilla

Ejemplo con Reactive form

Componente

HTML

Error Message

Error message con entrada de texto

Error message con contenido

FieldSet

HTML utilizando legendText

Fieldset utilizando contenido en la leyenda

HTML utilizando legendData

HTML utilizando legendRef

File Upload

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Hint

Hint con entrada de texto

Hint con entrada HTML

Hint con entrada de contenido

Input

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Input-group

ItemInputGroupData

Ejemplo con contenido y NgModel

Ejemplo con parámetros y NgModel

HTML con campo independiente

HTML con campo utilizado en un formulario reactivo

HTML con campo utilizado en un formulario dirigido por plantilla

Label

Label con entrada de texto

Label con contenido

Legend

Hint con entrada de texto

Radios

ItemRadioData

Ejemplo con contenido y NgModel

Componente

HTML

Ejemplo parámetros y NgModel

Componente

HTML

Ejemplo con Formulario y condicionalesVer apartado ConditionDirective

SearchBar

Componente

Componente

Componente

Select

Objeto SelectItemData

Componente

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective