Discussion :

[angie13003]

Bonjour,

J'effectue un ngFor sur mon groupe de bouton radio mais je n'arrive pas récupérer la valeur de ces derniers pour valider mon formulaire.

La valeur du label s'affiche bien en occurrence.

Voici mon code

Code html :

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

1
2
3
4
5
6
  <form [formGroup]="bookingFOrm">
    <div class="radio-group" *ngFor="let bookingCalendar of bookingCalednars | paginate: { itemsPerPage: 5, currentPage: p }">
        <input name="dateForth" type="radio" [value]="bookingCalendar.datebookingCalendar" class="validate m-auto" formControlName="dateForth" >
        <label for="dateForth" (click)="changeFormulaBooking()">{{ bookingCalendar.datebookingCalendar }}</label>
      </div>
  </form>

[krakatoa]

Code :

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

1
2
3
4
console.log(
this.monForm.get('dateForth').value
);

sinon dans ton code il manque le bouton submit

[angie13003]

Alors pou le bouton submit je sais car le formulaire n'est pas fini il y a d'autre chose. mais comme il est trèslong je teste déjà chaque partie juste avec des clikc pour voir si je récupére bien les données.

Quand je fais le conosle.log(this.monForm.get('dateForth').value); je n'ai rien qui s'affiche. Il me récupére aucun donnée.

est ce que c'est parce que je n'ai pas mis id dans mon input ?

[krakatoa]

justement, tant que tu ne submit pas le formulaire il n'est pas envoyé !

après si tu veux recup les données sans submit faut faire un peu différemment

[angie13003]

Alors j'ai modifié j'ai fait ça.

compoement.ts

Code :

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
  ngOnInit(): void {
    // this.getBooking();
    this.bookingCalendarSubscription = this.calendarBooking.bookingCalendarSubject.subscribe(
      (bookingCalendars: BookingCalendar[]) => {
        this.bookingCalednars = bookingCalendars;
        console.log(this.bookingCalednars);
      }
    );
    this.calendarBooking.readList();
    this.initForm()
  }
 
  initForm() {
    this.bookingFOrm = this.fb.group({
      dateForth: [''],
      test: ['']
    })
  }
 
  onSubmitForm() {
    console.log(this.bookingCalednars);
    console.log('date forth', this.bookingFOrm.get('dateForth').value);
    console.log('test', this.bookingFOrm.get('test').value);
  }

compoment.html

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
  <form [formGroup]="bookingFOrm" (ngSubmit)="onSubmitForm()">
    <div class="radio-group" *ngFor="let bookingCalendar of bookingCalednars | paginate: { itemsPerPage: 5, currentPage: p }">
        <input name="dateForth" type="radio" [value]="bookingCalendar.datebookingCalendar" [id]="bookingCalendar.idBookingCalendar" class="validate m-auto" formControlName="dateForth" >
        <label for="dateForth">{{ bookingCalendar.datebookingCalendar }}</label>
      </div>
 
      <div class="radio-group">
        <input type="radio" id="option-one" name="test" value="1" formControlName="test" >
        <label for="option-one">One</label>
        <input type="radio" id="option-two" name="test" value="2" formControlName="test" >
        <label for="option-two">Two</label>
        <input type="radio" id="option-three" name="test" value="3" formControlName="test" >
        <label for="option-three">Three</label>
      </div>
      <button type="submit" [disabled]="bookingFOrm.invalid">Valider</button>
  </form>

et donc au niveau des résultats

pour le console.log(this.bookingCalednars); j'ai bien mon tableau qui s'affiche
pour le console.log('date forth', this.bookingFOrm.get('dateForth').value); j'ai rien qui s'affiche juste 'date forth'
pour le console.log('test', this.bookingFOrm.get('test').value); j'ai 'test qui s'affiche avec a valeur sélectionné

dans le html le {{ bookingCalendar.datebookingCalendar }} affiche bien mes valeurs. mais dans l'input que je met [value]="bookingCalendar.datebookingCalendar" apparement il me récupère pas la valeur séectionné.

[angie13003]

ah sayer j'ai trouvé il fallait rajouter le id dans l'input et le for dans le label de cette manière

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
  <form [formGroup]="bookingFOrm" (ngSubmit)="onSubmitForm()">
    <div class="radio-group" *ngFor="let bookingCalendar of bookingCalednars | paginate: { itemsPerPage: 5, currentPage: p }">
        <input name="dateForth" type="radio" [value]="bookingCalendar.datebookingCalendar" [id]="bookingCalendar.idBookingCalendar" class="validate m-auto" formControlName="dateForth" >
        <label [for]="bookingCalendar.idBookingCalendar">{{ bookingCalendar.datebookingCalendar }}</label>
      </div>
 
      <div class="radio-group">
        <input type="radio" id="option-one" name="test" value="1" formControlName="test" >
        <label for="option-one">One</label>
        <input type="radio" id="option-two" name="test" value="2" formControlName="test" >
        <label for="option-two">Two</label>
        <input type="radio" id="option-three" name="test" value="3" formControlName="test" >
        <label for="option-three">Three</label>
      </div>
      <button type="submit" [disabled]="bookingFOrm.invalid">Valider</button>
  </form>

[krakatoa]

bien jouez