Faire la liaison en directe entre le composant et le template avec form builder
bonjour,
j'ai un formulaire auquel j'ajoute un champ hidden, j'aimerais que lorsque je clique sur une case, la valeur de ce champs hiddent soir remplit à la volé.
voici mon champs avec un formulaire de template:
Code:
1
2
| <input type="hidden" name="jeton" [(ngModel)]="jeton" value="pas de jeton">
<input [(ngModel)]="caseOui" (change)="cocher(1)" type="checkbox" name="non"> |
Code:
1
2
3
4
5
6
7
| export class ContactFormComponent implements OnInit {
jeton: any = "pas de jeton";
//vérifier si les réponses sont correctent
if ( this.caseNon ) {
this.jeton="XYZ.... "
} |
Ce formulaire fonctionne bien, dès que je clique sur la case caseOui, le champs champs hiddent se charge bien à la volé.
Je souhaite maintenant utiliser un formulaire réactive d'angular, voici le script:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <h1>Formulaire de contact</h1>
<form id="contactForm" *ngIf="!endForm" [formGroup]="contactForm" (ngSubmit)="envoyer()">
<input type="hidden" formControlName="jeton" >
<div class="texte">
<mat-form-field>
<input matInput formControlName="nom" placeholder="votre nom">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="prenom" placeholder="votre prénom">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="email" placeholder="votre email">
</mat-form-field>
</div>
<div class="message">
<mat-form-field>
<textarea matInput formControlName="message" placeholder="Votre message">
</textarea>
</mat-form-field>
<mat-checkbox [(ngModel)]="checked" value="cheked" >Checked</mat-checkbox>
{{checked |json}}
<button mat-raised-button>Envoyer</button>
<span *ngIf="erreurForm" class="erreur">
{{erreurForm}}
</span>
</div>
</form>
<div *ngIf="endForm">
<h2>Votre demande à été pris en compte</h2>
</div> |
j'ai cette erreur, je ne peux plus binder l'attribut "checked" avec ngModel :(
Citation:
NewcontactComponent.html:23 ERROR Error:
ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead. Example:
Il me dit de vérifier le checked par le fromGroup, si j'utilise cela, je ne pourrais plus avoir la capacité de savoir à la volé le valeur de la case coché ?
sinon je serai obligé d'ajouter un événement sur la case à coché ?
Code:
<mat-checkbox formControlName="checked" (click)="changeValeurChekedDuComponent()" >Checked</mat-checkbox>
Est t'il possible d'avoir le même comportement sans devoir à chaque fois recharger les attribut du composant dans les cases qu'on a coché, car j'en ai mis plusieurs,
il faut la bonne combinaison pour pourvoir obtenir ce jeton dans ce champs hidden
j'aurai pu définir la combinaison lors de la génération de form group:
Code:
1
2
3
4
5
6
7
8
9
10
11
| this.contactForm = this._fb.group({
jeton: ['pas de jeton', Validators.minLength(this.nbChaineJeton)],
nom: ['', Validators.required],
prenom: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
message: ['', Validators.required],
checked:['false, Validators(true)],
checked2['false, Validators(false)],
checked3[false,, Validators(false],
checked4:['false, Validators(true)],
}); |
mais pour l'instant je pense que pour valider les checked on est obligé de clique sur le bouton envoyer, j'aimerais que lorsque l'utilisateur trouve la bonne réponse des cases à coché,
un message apparaît à la volé, comme ça l'utilisateur sais qu'il peut en sécurité cliquer sur envoyé .
merci de vos idées :)
