1. #1
    Membre expérimenté
    Avatar de Daïmanu
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2011
    Messages
    471
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2011
    Messages : 471
    Points : 1 605
    Points
    1 605

    Par défaut [Angular 4] Binder un modèle sur un composant maison

    Bonjour.

    Au cours du développement de mon site, j'ai placé plusieurs <textarea>. J'ai ensuite voulu y mettre un compteur de caractères restants.
    J'ai donc créé un composant maison pour factoriser et remplacer tous les <textarea> par un <textareawcounter>.

    compontent.html :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <textarea class="form-control"
          [maxLength]="maxLength"
          [(ngModel)]="value"
          [placeholder]="placeholder"
          [name]="name"></textarea>
    <span class="text-info col-sm-offset-0">
        Maximum {{maxLength}} caractères.
    </span>
    <span class="{{full() ? 'text-danger' : 'text-info'}}">
        {{formatCount()}}
    </span>

    component.ts :
    Code Typescript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import {Component, OnInit, Input} from '@angular/core';
    import {ControlValueAccessor} from '@angular/forms';
     
    @Component({
      selector: 'textareawcounter',
      templateUrl: './textarea-counter.component.html',
      styleUrls: ['./textarea-counter.component.css']
    })
    export class TextAreaWithCounter implements ControlValueAccessor {
        @Input() value: string = "";
        @Input() placeholder: string = "";
        @Input() name: string = "";
        private maxLength = 1000;
    /*Reste de la classe*/
    }

    J'utilise le tout ceci :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <textareawcounter
      [(ngModel)]="model.comment" name="comment"
      placeholder="Commentaire"></textareawcounter>

    J'aimerais déjà savoir si cette approche est correcte ?

    Ensuite, mon soucis est qu'en mettant le nouveau component, j'ai "perdu" la connexion avec le modèle de mes formulaires. Le texte du champs n'est plus bindé avec le modèle (model.comment). Du coup comment on fait pour binder le component maison avec le modèle ?

    Merci.
    Je fais appel aux esprits de Ritchie, Kernighan, Stroustrup et Alexandrescu
    Donnez moi la force, donnez moi le courage de coder proprement !

  2. #2
    Membre expérimenté
    Avatar de Daïmanu
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2011
    Messages
    471
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : janvier 2011
    Messages : 471
    Points : 1 605
    Points
    1 605

    Par défaut

    J'ai avancé grâce à cette discussion qui ajoute un attribut (valueChange) dans l'utilisation du composant, et (ngModelChange) dans la définition du composant.

    Ça marche, mais je suis curieux de savoir si on peut se passer de (valueChange) qui pourrait être omis
    Je fais appel aux esprits de Ritchie, Kernighan, Stroustrup et Alexandrescu
    Donnez moi la force, donnez moi le courage de coder proprement !

Discussions similaires

  1. Documentation sur les composants réseaux
    Par OverCat dans le forum Hardware
    Réponses: 5
    Dernier message: 27/01/2005, 10h49
  2. petite question sur le composant IBX ...
    Par vbcasimir dans le forum Bases de données
    Réponses: 4
    Dernier message: 05/01/2005, 10h33
  3. aide sur les composants de la RxLib 2.75
    Par mariustrezor dans le forum Bases de données
    Réponses: 4
    Dernier message: 12/10/2004, 14h35
  4. problème sur le composant aspSmartUpload
    Par PrinceMaster77 dans le forum ASP
    Réponses: 8
    Dernier message: 23/09/2004, 10h17
  5. [C#] OnPaint(PaintEventArgs e) sur création Composant
    Par pc152 dans le forum Windows Forms
    Réponses: 4
    Dernier message: 26/08/2004, 16h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo