[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:
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:
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:
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.
