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