desy-angular v5.1 - Manual de integración DesyFormsModule
- Servicios Digitales de Aragón
Owned by Servicios Digitales de Aragón
- 1 Componentes relativos a formularios
- 1.1 Character count
- 1.2 Checkboxes
- 1.3 Date-input
- 1.4 Error Message
- 1.5 FieldSet
- 1.6 File Upload
- 1.7 Hint
- 1.8 Input
- 1.9 Input-group
- 1.10 Label
- 1.11 Legend
- 1.12 Radios
- 1.13 SearchBar
- 1.14 Select
- 1.15 Textarea
- 1.16 Tree
- 1.17 Accesibilidad
- 2 Uso de los directivas de los formularios
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.
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.
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.
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.
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.
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
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>
<desy-hint ... ></desy-hint> Permite representar un texto de ayuda.
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.
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.
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
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.
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.
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.
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
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.
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>Tree
<desy-tree ...>
<desy-search-bar ...>...</desy-search-bar>
<desy-tree-item ...>
<desy-label>...</desy-label>
<desy-sub>
<desy-tree-item>...</desy-tree-item>
...
</desy-tree-item>
...
</desy-tree>Permite representar un árbol con ítems seleccionables. El valor que gestiona es un listado (plano) con los valores de los items seleccionados.
Ejemplo sencillo
HTML
<desy-tree [name]="'exampleNameContent'" [type]="'checkbox'" [(ngModel)]="valueContent"
[idPrefix]="'prefix'"[expandedFirstLevel]="false" [decoupleChildFromParent]="true">
<desy-fieldset>
<desy-legend>Ejemplo de arbol</desy-legend>
</desy-fieldset>
<desy-hint [id]="'hint-gral'">Prueba arbol</desy-hint>
<desy-search-bar [(ngModel)]="searchValue"
[labelText]="'Buscar en el árbol'"
[id]="'search-bar-tree'"
[placeholder]="'Buscar'">
</desy-search-bar>
<desy-tree-item [value]="'i1'" [id]="'id1'"><desy-label>Item 1</desy-label></desy-tree-item>
<desy-tree-item [value]="'i2'" [checked]="true">
<desy-label>Item 2</desy-label>
<desy-hint>Item numero 2</desy-hint>
</desy-tree-item>
<desy-tree-item [value]="'i3'">
<desy-label>Item 3</desy-label>
<desy-tree-sub>
<desy-tree-item [value]="'i4'"><desy-label>Item 4</desy-label>
<desy-tree-sub>
<desy-tree-item [value]="'i41'">
<desy-label>Item 4.1</desy-label>
<desy-hint [id]="'hint-interno'">Hint Item 4.1</desy-hint>
</desy-tree-item>
<desy-tree-item [value]="'i42'">
<desy-label>Item 4.2</desy-label>
<desy-tree-sub>
<desy-tree-item [value]="'i421'"><desy-label>Item 4.2.1</desy-label></desy-tree-item>
<desy-tree-item [value]="'i422'">
<desy-label>Item 4.2.2</desy-label>
<desy-tree-sub>
<desy-tree-item [value]="'i4221'"><desy-label>Item 4.2.2.1</desy-label></desy-tree-item>
<desy-tree-item [value]="'i4222'"><desy-label>Item 4.2.2.2</desy-label></desy-tree-item>
</desy-tree-sub>
</desy-tree-item>
</desy-tree-sub>
</desy-tree-item>
</desy-tree-sub>
</desy-tree-item>
<desy-tree-item [value]="'i5'">
<desy-label>Item 5 busc</desy-label>
</desy-tree-item>
<desy-tree-item [value]="'i6'" [disabled]="true">
<desy-label>Item 5 busc</desy-label>
</desy-tree-item>
<desy-tree-item [value]="'i7'">
<desy-label>Item 7</desy-label>
<desy-hint>Item numero 7</desy-hint>
</desy-tree-item>
</desy-tree-sub>
</desy-tree-item>
<desy-tree-item [value]="'i8'" [disabled]="true"><desy-label>Item 8</desy-label></desy-tree-item>
</desy-tree>Ejemplo con ítems recursivos y búsqueda personalizada
HTML
<form [formGroup]="form">
<desy-tree [name]="'example'"
[type]="'checkbox'"
[classes]="'mt-base'"
[(searchMatchValues)]="searchMatchValuesForm"
formControlName="tree"
[idPrefix]="'example-form'"
[disableDefaultSearch]="true">
<desy-fieldset></desy-fieldset>
<desy-hint>Componente arbol de ejemplo y parametrizado</desy-hint>
<desy-search-bar [labelText]="'Buscar en el árbol'" [id]="'search-bar-tree'" [placeholder]="'Buscar organismo'"
formControlName="search"
[errorMessageRef]="searchMatchValuesForm && searchMatchValuesForm.length === 0 ? errorSearch : null">
<ng-template #errorSearch>
<desy-error-message>
<desy-label>No hay resultados</desy-label>
</desy-error-message>
</ng-template>
</desy-search-bar>
<desy-tree-items-generator [items]="treeRootItems" [itemTemplate]="itemTemplateForm">
<!-- Template de ejemplo para contenido recursivo. IMPORTANTE: debe definirse como contenido de desy-tree -->
<ng-template #itemTemplateForm let-item="item">
<desy-tree-item [value]="item.value" [id]="idPrefix + '-form' ? null : item.id" [expanded]="item.expanded" [disabled]="item.disabled">
<desy-label>{{ item.label }}</desy-label>
<desy-tree-sub *ngIf="item.sub && item.sub.items">
<ng-container *ngFor="let subItem of item.sub.items">
<ng-container *ngTemplateOutlet="itemTemplateForm; context: {item: subItem}"></ng-container>
</ng-container>
</desy-tree-sub>
</desy-tree-item>
</ng-template>
</desy-tree-items-generator>
</desy-tree>
</form>Componente
export class DemoTreeComponent implements OnInit {
form: FormGroup;
treeRootItems = [ { "value": "i1", "id": "i1", "label": "Item 1", "sub": { "items": [ { "value": "i2", "id": "i2", "label": "Item 2", "disabled": false, "sub": { "items": [ { "value": "i3", "id": "i3", "label": "Item 3", "disabled": false }, { "value": "i4", "id": "i4", "label": "Item 4", "disabled": false }, { "value": "i5", "id": "i5", "label": "Item 5", "disabled": false } ] } }, { "value": "i6", "id": "i6", "label": "Item 6", "disabled": false, "sub": { "items": [ { "value": "i7", "id": "i7", "label": "Item 7", "disabled": false }, { "value": "i8", "id": "i8", "label": "Item 8", "disabled": false }, { "value": "i9", "id": "i9", "label": "Item 9", "disabled": false } ] } }, { "value": "i10", "id": "i10", "label": "Item 10", "disabled": false, "sub": { "items": [ { "value": "i11", "id": "i11", "label": "Item 11", "disabled": false }, { "value": "i12", "id": "i12", "label": "Item 12", "disabled": false }, { "value": "i13", "id": "i13", "label": "Item 13", "disabled": false } ] } } ] } }, { "value": "i14", "id": "i14", "label": "Item 14", "sub": { "items": [ { "value": "i15", "id": "i15", "label": "Item 15", "disabled": false, "sub": { "items": [ { "value": "i16", "id": "i16", "label": "Item 16", "disabled": false }, { "value": "i17", "id": "i17", "label": "Item 17", "disabled": false }, { "value": "i18", "id": "i18", "label": "Item 18", "disabled": false } ] } }, { "value": "i19", "id": "i19", "label": "Item 19", "disabled": false, "sub": { "items": [ { "value": "i20", "id": "i20", "label": "Item 20", "disabled": false }, { "value": "i21", "id": "i21", "label": "Item 21", "disabled": false }, { "value": "i22", "id": "i22", "label": "Item 22", "disabled": false } ] } }, { "value": "i23", "id": "i23", "label": "Item 23", "disabled": false, "sub": { "items": [ { "value": "i24", "id": "i24", "label": "Item 24", "disabled": false }, { "value": "i25", "id": "i25", "label": "Item 25", "disabled": false }, { "value": "i26", "id": "i26", "label": "Item 26", "disabled": false } ] } } ] } }, { "value": "i27", "id": "i27", "label": "Item 27", "sub": { "items": [ { "value": "i28", "id": "i28", "label": "Item 28", "disabled": false, "sub": { "items": [ { "value": "i29", "id": "i29", "label": "Item 29", "disabled": false }, { "value": "i30", "id": "i30", "label": "Item 30", "disabled": false }, { "value": "i31", "id": "i31", "label": "Item 31", "disabled": false } ] } }, { "value": "i32", "id": "i32", "label": "Item 32", "disabled": false, "sub": { "items": [ { "value": "i33", "id": "i33", "label": "Item 33", "disabled": false }, { "value": "i34", "id": "i34", "label": "Item 34", "disabled": false }, { "value": "i35", "id": "i35", "label": "Item 35", "disabled": false } ] } }, { "value": "i36", "id": "i36", "label": "Item 36", "disabled": false, "sub": { "items": [ { "value": "i37", "id": "i37", "label": "Item 37", "disabled": false }, { "value": "i38", "id": "i38", "label": "Item 38", "disabled": false }, { "value": "i39", "id": "i39", "label": "Item 39", "disabled": false } ] } } ] } } ];
ngOnInit(): void {
this.form = new FormGroup({
tree: new FormControl(null),
search: new FormControl(null),
});
this.form.get('search').valueChanges.subscribe(v => {
this.searchMatchValues = this.customSearch(value);
});
}
/**
* Búsqueda personalizada en el arbol. Debe devolver los value de los ítems que se desean mostrar.
*/
customSearch(searchText: string): string[] {
// Ejemplo, devuelve los X primeros items, donde X es el número de caracteres del texto de entrada.
const items = [];
for (let i = 0; i < searchText.length; i++) {
items.push('i' + i);
}
return items;
}
}
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 | 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 | Array de todos ítems posibles | si, si value esta indicado. |
@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>