Angular2 Formas reactivas FormControl para botones de radio

En tu componente, define tu botón de opción como parte de tu formulario:

export class MyComponent {
  form: FormGroup;
  constructor(fb: FormBuilder){
    this.form = fb.group({
      gender: ""
    });
  }
}

En el HTML de tu componente, construye tu formulario:

<div class="form-group">
  <label>Please select your gender</label>
  <div class="row">
    <label class="md-check">
      <input type="radio" value="female" name="gender" formControlName="gender">
      Female
    </label>

    <label class="md-check">
      <input type="radio" value="male" name="gender" formControlName="gender">     
      Male
    </label>
  </div>
</div>

Asumo que sabes cómo construir el formulario completo con tu botón enviar, que no se muestra aquí.

Cuando se envía el formulario, puede obtener el valor del botón de opción aquí:

let genderValue = this.form.value.gender;

Esto será "femenino" o "masculino" dependiendo de qué botón de opción esté marcado.

Espero que esto te ayude. Bien suerte!

Una pequeña para agregar sobre las formas reactivas me di cuenta . Si el valor es un entero necesita cambiar a cadena o de lo contrario no se seleccionará el botón de opción ..

  this.jobForm = this._fb.group({
                    id: [res["job"]["id"]],
                    job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required],
                    title: [res["job"]["title"],Validators.required]
                });

Los controles de material angular son (en su mayoría) lo suficientemente maduros como para usarlos ahora.

Sus muestras utilizan principalmente ngModel, pero así es como puedes hacerlo con formControlName.

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem">
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button>
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button>
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button>
</mat-radio-group>

Estoy usando angular/flex-layout para poner mis botones en una columna vertical.

(También podría haber hecho value='Blue' para una constante o [value]="blueColorName" para referirse a una propiedad modelo.

Creo que puede haber un problema con 0 porque no es un valor 'verdadero', así que ten cuidado si estás vinculando a enums (puede que ya no sea un problema).