first-reactive-form html

first-reactive-form.component.html

<form [formGroup]="form">
  <div *ngFor="let prop of personProps">
    <label>{{ prop.label }}:</label>
    <div [ngSwitch]="prop.type">
      <input *ngSwitchCase="'text'" [type]="prop.type" [formControlName]="prop.key">      
      <input *ngSwitchCase="'number'" [type]="prop.type" [formControlName]="prop.key">      

      <div *ngSwitchCase="'radio'">
        <label *ngFor="let option of prop.options">
          <input type="radio"
            [name]="prop.key"
            [formControlName]="prop.key"
            [value]="option.value"
          >
          {{ option.label }}
        </label>
      </div>
      <select *ngSwitchCase="'select'" [formControlName]="prop.key">
        <option *ngFor="let option of prop.options" [value]="option.value">
          {{ option.label }}
        </option>
      </select>
    </div>

    <div class="error" *ngIf="form.get(prop.key).invalid && (form.get(prop.key).dirty)">
      <span *ngIf="form.get(prop.key).errors.required">
          You have to provide a value.
      </span>
      <span *ngIf="form.get(prop.key).errors.min">
          You have to provide a value greater or equal to {{ form.get(prop.key).errors.min.min }}
      </span>
    </div>

  </div>
</form>
<pre>{{ form.value | json }}</pre>