desy-angular v2.0 - Manual de integración DesyFormsModule
place
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 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
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.