<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <!-- This is how you get access to the form created by angular automatically
      using the #f="ngForm", the f can be anything -->
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div id="user-data" ngModelGroup="userData">
          <div class="form-group">
            <label for="username">Username</label>
            <!-- ngModel lets angular know that this input is a control of our form. -->
            <input
             type="text"
             id="username"
             class="form-control"
             ngModel
             name="username"
             required
             #user="ngModel">
             <span class="help-block" *ngIf="!user.valid && user.touched">
               Please enter a valid username
             </span>
          </div>
          <button class="btn btn-default" type="button" (click)="suggestUserName()">Suggest an Username</button>
          <div class="form-group">
            <label for="email">Mail</label>
            <input
             type="email"
             id="email"
             class="form-control"
             ngModel
             name="email"
             required
             email
             #email="ngModel">
             <span class="help-block" *ngIf="!email.valid && email.touched">
               Please enter a valid email
             </span>
          </div>
        </div>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <!-- Select is just another type of HTML input -->
          <select
           id="secret"
           class="form-control"
           [ngModel]="defaultQuestion"
           name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
        </div>
        <div class="form-group">
          <textarea class="form-control" name="questionAnswer" rows="3" [(ngModel)]="answer">

          </textarea>
        </div>
        <p>Youre reply: {{ answer }}</p>
        <div class="radio" *ngFor="let gender of genders">
          <label>
            <input type="radio" name="gender" ngModel [value]="gender">
            {{ gender }}
          </label>
        </div>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!form.valid">Submit</button>
      </form>
    </div>
  </div>
  <hr>
  <div class="row" *ngIf="submitted">
    <div class="col-xs-12">
        <h3>Your Data</h3>
        <p>Username: {{ user.username }}</p>
        <!-- <p>Mail: {{ user.value.email }}</p> -->
        <!-- <p>secret: {{ user.secret }}</p>
        <p>answer: {{ user.answer }}</p>
        <p>gender: {{ user.gender }}</p> -->
    </div>
  </div>
</div>