Récupération d'une valeur dans un button radio

Version imprimable

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:

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>

12/06/2021, 08h59
krakatoa
Code:

1 2 3 4 console.log( this.monForm.get('dateForth').value );
sinon dans ton code il manque le bouton submit
12/06/2021, 10h29
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 ?
12/06/2021, 10h30
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

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

compoement.ts

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

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

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

Code:

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>

12/06/2021, 10h50
krakatoa

bien jouez ;)