IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

TypeScript Discussion :

[Angular 4] Binder un modèle sur un composant maison


Sujet :

TypeScript

  1. #1
    Membre émérite
    Avatar de Daïmanu
    Homme Profil pro
    Développeur touche à tout
    Inscrit en
    Janvier 2011
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur touche à tout

    Informations forums :
    Inscription : Janvier 2011
    Messages : 694
    Points : 2 425
    Points
    2 425
    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 !

    « Ça marche pas » n'est PAS une réponse convenable, merci de détailler le souci en fournissant l’environnement, le code source, les commandes et les messages d'erreur.

    Ce club possède également un clavardage, on y trouve quelques perles entre deux sessions d'entraides.

  2. #2
    Membre émérite
    Avatar de Daïmanu
    Homme Profil pro
    Développeur touche à tout
    Inscrit en
    Janvier 2011
    Messages
    694
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur touche à tout

    Informations forums :
    Inscription : Janvier 2011
    Messages : 694
    Points : 2 425
    Points
    2 425
    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 !

    « Ça marche pas » n'est PAS une réponse convenable, merci de détailler le souci en fournissant l’environnement, le code source, les commandes et les messages d'erreur.

    Ce club possède également un clavardage, on y trouve quelques perles entre deux sessions d'entraides.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Documentation sur les composants réseaux
    Par OverCat dans le forum Hardware
    Réponses: 5
    Dernier message: 27/01/2005, 11h49
  2. petite question sur le composant IBX ...
    Par vbcasimir dans le forum Bases de données
    Réponses: 4
    Dernier message: 05/01/2005, 11h33
  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, 15h35
  4. problème sur le composant aspSmartUpload
    Par PrinceMaster77 dans le forum ASP
    Réponses: 8
    Dernier message: 23/09/2004, 11h17
  5. [C#] OnPaint(PaintEventArgs e) sur création Composant
    Par pc152 dans le forum Windows Forms
    Réponses: 4
    Dernier message: 26/08/2004, 17h13

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