desy-angular v11.1 - Manual de integración DesyFormsModule
- 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.
, multiple selections available,