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.
Partager