Comment transmettre la valeur d'un bouton radio dans un formulaire réactif ?

Question

J'ai la version RC5 d'Angular2 J'ai quelque chose comme ça, quelques uns d'entre eux

<input formControlName="uploadType" id="upload_type-parts_service" name="uploadType" value="parts_service" type="radio" />

Il y a un changement que j'ai lié

(change)=onUploadTypeChange( ??? )

J'ai ensuite défini la fonction dans mon js

onUploadTypeChange( uploadType ) {
    this.uploadType = ...
}

J'ai le plus grand mal à obtenir la valeur du bouton radio. Mon plan est de la passer à la fonction onchange et de mettre à jour la fonction uploadType qui affichent/masquent certains éléments dans la vue. J'ai essayé de passer this o this.value o this.type.controls.uploadType.value mais rien ne fonctionne. type est le formulaire lui-même.

Quelqu'un peut-il m'indiquer comment j'obtiendrais la valeur en formes réactives ?

Answer 1

Grâce à la question de msanford dans les commentaires, j'ai compris que $event a besoin d'être adoptée

onUploadTypeChange( $event )

puis dans mon js

onUploadTypeChange( e ) {
    this.uploadType = e.target.value;
}

Les target renvoie l'entrée elle-même

Je liais la valeur de la radio avec [value]=... mais ce n'était pas nécessaire pour les formes réactives et cela posait des problèmes. J'ai défini des valeurs avec seulement values="..."

Maintenant, tout fonctionne, et {{ this.type.controls.uploadType.value }} imprime la valeur attendue

Answer 2

Avez-vous essayé quelque chose de ce genre ? Cela permet de surveiller les changements de valeur et de placer l'abonnement dans la méthode ngAfterViewInit().

<div class="form-group" [ngClass]="{'has-error': displayMessage.Repeatable }">
      <label class="control-label" for="Repeatable">Repeatable</label>
      <input type="radio" id="Repeatable" [checked]="checked" 
          formControlName="Repeatable" />{{repeatableValue | uppercase}}              
</div>

// Component

ngAfterViewInit(): void {
    console.log('ngAfterViewInit');

    this.setForm.get('Repeatable').valueChanges.subscribe(value => this.repeatableValue = value.toString());
}