Commit 17ba38b2 authored by Grand Francois's avatar Grand Francois
Browse files

remaniement GenericInputComponent : possibilité que la valeur gérée ne soit...

remaniement GenericInputComponent : possibilité que la valeur gérée ne soit plus seulement un type simple mais le membre d'une classe
Showing with 105 additions and 13 deletions
+105 -13
......@@ -15,10 +15,19 @@ exemple de template :
/**
* classe de gestion générique d'un champ de saisie avec titre, validation et message d'erreur
* définitions :
* - modèle : valeur gérée, indépendement de la façon dont elle est affichée
* - modèle : entité mémoire gérée, indépendamment de la façon dont elle est affichée.
* A noter que si cette entité est une classe, on peut ne présenter à l'interface qu'un membre de cette classe,
* cad que get model() et getModelValue() ne renverront pas la même chose.
* Par ex : get model()-> instance_de_la_classe_Toto, getModelValue() -> Toto.unMembreNumerique
* - valeur gérée : entité elle même si c'est un type simple (number, string, ...) ou une partie d'un classe
* - UI : interface utilisateur, présentation de la valeur gérée
*/
export abstract class GenericInputComponent extends BaseComponent {
/**
* entité mémoire gérée
*/
protected _model: any;
/**
* flag de désactivation de l'input
*/
......@@ -131,7 +140,7 @@ export abstract class GenericInputComponent extends BaseComponent {
}
public get model(): any {
return this.getModelValue();
return this._model;
}
/**
......@@ -149,8 +158,10 @@ export abstract class GenericInputComponent extends BaseComponent {
}
public set model(v: any) {
this.setAndValidateModel(v);
this.updateAndValidateUI();
this.beforeSetModel();
this._model = v;
this.afterSetModel();
this.updateAll();
}
/**
......@@ -175,15 +186,29 @@ export abstract class GenericInputComponent extends BaseComponent {
this.setAndValidateModel(this.uiToModel(ui));
}
private updateAll() {
this.updateAndValidateUI();
this.validateModel();
}
/**
* appelé après le 1er affichage du composant
* @see BaseComponent
*/
protected afterFirstViewChecked() {
this.updateAndValidateUI();
this.validateModel();
this.updateAll();
}
/**
* appelé avant le changement de modèle
*/
protected beforeSetModel() { }
/**
* appelé après le changement de modèle
*/
protected afterSetModel() { }
/**
* retourne la valeur du modèle
*/
......@@ -196,7 +221,7 @@ export abstract class GenericInputComponent extends BaseComponent {
/**
* valide une valeur de modèle : est ce une valeur acceptable ? (par ex, nombre dans un intervalle, valeur dans une liste, ...)
* @param v valide la valeur du modèle
* @param v valeur à valider
* @returns isValid : true si la valeur est valide, false sinon
* @returns message : message d'erreur
*/
......@@ -209,7 +234,7 @@ export abstract class GenericInputComponent extends BaseComponent {
/**
* valide une valeur saisie dans l'UI (forme de la saisie : est ce bien une date, un nombre, ...)
* @param ui valide la valeur saisie
* @param ui saisie à valider
* @returns isValid : true si la valeur est valide, false sinon
* @returns message : message d'erreur
*/
......@@ -222,7 +247,7 @@ export abstract class GenericInputComponent extends BaseComponent {
}
/*
* exemple d'utilisation de GenericInputComponent
* exemples d'utilisation de GenericInputComponent
*/
/*
......@@ -230,17 +255,17 @@ import { Component } from "@angular/core";
import { NumericalString, Message } from "jalhyd";
// exemple où le modèle est un type simple (number)
@Component({
selector: "test-input",
template: `<div class="md-form form-sm">
<input mdbActive type="text" id="form1" class="form-control" [disabled]="isDisabled" [ngModel]="uiValue" (ngModelChange)="setUIValue($event)">
<input mdbActive type="text" id="form1" class="form-control" [disabled]="isDisabled" [(ngModel)]="uiValue">
<label for="form1">{{_title}}</label>
<small class="text-danger">{{_message}}</small>
<small *ngIf="showError" class="text-danger">{{errorMessage}}</small>
</div>`
})
export class TestInputComponent extends GenericInputComponent {
private _model: number;
constructor() {
super();
this._model = 0;
......@@ -289,4 +314,71 @@ export class TestInputComponent extends GenericInputComponent {
return +ui;
}
}
// exemple où le modèle est une classe dont on ne gère qu'un membre
import { BaseParam } from "jalhyd";
@Component({
selector: "test2-input",
template: `<div class="md-form form-sm">
<input mdbActive type="text" id="form1" class="form-control" [disabled]="isDisabled" [(ngModel)]="uiValue">
<label for="form1">{{_title}}</label>
<small *ngIf="showError" class="text-danger">{{errorMessage}}</small>
</div>`
})
export class Test2InputComponent extends GenericInputComponent {
constructor() {
super();
}
// paramètre géré
private get _param(): BaseParam {
return this._model;
}
protected getModelValue(): any {
return this._param.getValue();
}
protected setModelValue(v: any) {
this._param.setValue(v);
}
protected validateModelValue(v: any): { isValid: boolean, message: string } {
let msg = undefined;
let valid = false;
if (v < 0)
msg = "La valeur n'est pas >= 0 ";
else
valid = true;
return { isValid: valid, message: msg };
}
protected modelToUI(v: any): string {
if (typeof (v) == "number")
return String(v);
return undefined;
}
protected validateUIValue(ui: string): { isValid: boolean, message: string } {
let valid: boolean = false;
let msg: string = undefined;
let v: NumericalString = new NumericalString(ui);
if (!v.isNumerical)
msg = "Veuillez entrer une valeur numérique";
else
valid = true;
return { isValid: valid, message: msg };
}
protected uiToModel(ui: string): any {
return +ui;
}
}
/**/
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment