desy-angular v6.0 - 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 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.
