Discussion :

[keokaz]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        <input type="hidden" name="jeton" [(ngModel)]="jeton" value="pas de jeton">
         <input [(ngModel)]="caseOui" (change)="cocher(1)" type="checkbox" name="non">

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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