Template driven form with radio button validation and without NgFor

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 - NgFor Directive</title>
    <script src="https://unpkg.com/systemjs@0.19.41/dist/system.src.js"></script>
    <script src="https://unpkg.com/typescript@2.0.10"></script>
    <script src="system.config.js"></script>
  </head>
  <body>
    <rio-app>Loading...</rio-app>
    
    <script>
      System.import('main.ts');
    </script>
  </body>

</html>

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'rio-app',
  template: `
    <form [formGroup]="myForm">

      <label *ngFor="let gender of genders">
        {{ gender }}: 
        <input type="radio" name="gender" [value]="gender" 
           required [formControl]="myForm.controls['gender']"
        />
      </label>

      <div [hidden]="!myForm.controls['gender'].hasError('required')">
        The gender is required
      </div>

    </form>
  `
})
export class AppComponent {
  genders = ['Male', 'Female'];
  myForm : FormGroup;
  
  constructor(private formBuilder: FormBuilder){
    this.myForm = this.formBuilder.group({
      'gender' : [null, Validators.required]
    });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component.ts';

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

var angularVersion = '2.4.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    '@angular/forms': 'unpkg:@angular/forms@'+angularVersion,
    'rxjs': 'unpkg:rxjs@5.0.3',
    'zone.js': 'unpkg:zone.js@0.7.2',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.9'
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule)