Grouping Form Controls in Angular Template-driven forms

app.component.html

<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">
      <form (ngSubmit)="onSubmit()" #myForm="ngForm">
        <div id="user-data"
             ngModelGroup="myUserData"
             #myUserData="ngModelGroup">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" class="form-control"
                   ngModel name="username"
                   required>
          </div>
          <button class="btn btn-default" type="button">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
                   #myEmail="ngModel">
            <span class="help-block" *ngIf="!myEmail.valid && myEmail.touched">Please enter a valid email!</span>
          </div>
        </div>
        <p *ngIf="!myUserData.valid && myUserData.touched">User Data is invalid!</p>
        <div class="form-group">
          <label for="secret">Secret Questions</label>
          <select id="secret" class="form-control"
                  [ngModel]="'pet'"
                  name="secret">
            <option value="pet">Your first Pet?</option>
            <option value="teacher">Your first teacher?</option>
          </select>
          <div class="form-group">
            <textarea name="questionAnswer" rows="3" class="form-control"
                      [(ngModel)]="answer"></textarea>
          </div>
        </div>
        <div>Your replay: {{answer}}</div>
        <button class="btn btn-primary" type="submit"
                [disabled]="!myForm.valid">Submit
        </button>
      </form>
    </div>
  </div>
</div>