ngModelGroup

Creates and binds a FormGroup instance to a DOM element. Use this directive to validate a sub-group of your form separately from the rest of your form, or if some values in your domain model make more sense to consume together in a nested object.

<form (ngSubmit)="onSubmit()" #f="ngForm">
    <div id="user-data" 
      ngModelGroup="userData"
      #userData="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-dark my-3" 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
          #email="ngModel">
          <span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
      </div>
    </div>
    <p *ngIf="!userData.valid && userData.touched">User Data is invalid!</p>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>