Table of Contents

minLevel	1
maxLevel	2

Componentes relativos a formularios

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

...

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

...

Code Block

language	xml

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

...

Expand

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

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Code Block

language	js

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

Code Block

language	xml

<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

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

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

Expand

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

Expand

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

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	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

Code Block

language	js

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

HTML

Code Block

language	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

...

Code Block

language	xml

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

...

Anchor

	errorMessage
	errorMessage

Error Message

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Error message con entrada de texto

Code Block

language	xml

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

Error message con contenido

Code Block

language	xml

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

FieldSet

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

HTML utilizando legendText

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

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

Anchor
hint
hint
Hint

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Hint con entrada de texto

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

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

Input

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

<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

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Code Block

<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

Code Block

language	js

@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

Code Block

language	html

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

HTML con campo utilizado en un formulario reactivo

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

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

Label

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Label con entrada de texto

Code Block

language	xml

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

Label con contenido

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

Legend

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Hint con entrada de texto

Code Block

language	xml

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

Radios

...

Code Block

language	xml

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

...

Expand

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

Expand

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

Expand

title	Ejemplos

Ejemplo con contenido y NgModel

Componente

Code Block

language	js

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

HTML

Code Block

language	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

Code Block

language	js

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

HTML

Code Block

language	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

...

Code Block

language	xml

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

...

Expand

title	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

Expand

title	Eventos de salida

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

Expand

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

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	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

Code Block

language	js

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

HTML

Code Block

language	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

Code Block

language	js

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

HTML utilizando labelText y errorMessageText

Code Block

language	xml

<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

Code Block

language	html

  <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

Code Block

language	html

  <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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo con contenido y ngModel

Code Block

language	html

<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

Code Block

language	js

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

HTML

Code Block

language	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

Code Block

language	js

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

HTML utilizando labelText, hintText y errorMessageText

Code Block

language	xml

<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

Code Block

language	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'}]"
               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

Code Block

language	html

  <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

...

Code Block

language	xml

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

...

Expand

title	Ejemplos

Ejemplo básico, utilizando ngModel

Componente

Code Block

language	js

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

HTML

Code Block

language	xml

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

Ejemplo completo, utilizando formControlName

Componente

Code Block

language	js

@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

Code Block

language	xml

<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

Code Block

language	xml

<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

Code Block

language	xml

<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

...

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

...

Page Comparison

Versions Compared

Old Version 4

New Version 5

Key

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

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

AnchorhinthintHint

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

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

Componente

HTML

Componente

HTML utilizando labelText, hintText y errorMessageText

HTML utilizando labelData, hintData y errorMessageData

HTML utilizando labelRef, hintRef y errorMessageRef

Textarea

Componente

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective

Anchor
hint
hint
Hint

Ejemplo con Formulario y condicionales
Ver apartado ConditionDirective