generic-input.component.ts

import { Input, Output, EventEmitter, ChangeDetectorRef } from "@angular/core";

import { BaseComponent } from "../base/base.component";

/*
exemple de template :

<div class="md-form form-sm">
    <input mdbActive type="text" id="form1" class="form-control" [disabled]="isDisabled" [ngModel]="uiValue" (ngModelChange)="setUIValue($event)">
    <label for="form1">{{_title}}</label>
    <small class="text-danger">{{_message}}</small>
</div>
*/

/**
 * classe de gestion générique d'un champ de saisie avec titre, validation et message d'erreur
 * définitions :
 * - 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
     */
    @Input('inputDisabled')
    private _inputDisabled: boolean = false;

    /**
     * flag d'affichage du message d'erreur
     */
    public showError = true;

    /**
     * chaîne affichée dans l'input quand aucune valeur n'est saisie
     */
    @Input('title')
    private _title: string;

    /**
     * événement signalant un changement : valeur du modèle, validité, ...
     */
    @Output()
    protected onChange = new EventEmitter<any>();

    /**
     * valeur saisie.
     * Cette variable n'est modifiée que lorsqu'on affecte le modèle ou que l'utilisateur fait une saisie
     */
    private _uiValue: string;

    /**
     * flag de validité de la saisie dans l'UI
     * par ex : est ce bien une valeur numérique ? n'y a-t-il que des minuscules ? etc...
     */
    private _isValidUI = false;

    /**
     * flag de validité de la valeur du modèle
     * par ex : la valeur saisie fait elle bien partie d'un domaine de définition donné ? date inférieure à une limite ? etc...
     */
    private _isValidModel = false;