Nested Form Groups

HTML

<form [formGroup]="form" (ngSubmit)="login()">
    <div *ngIf="form.errors" class="alert alert-danger">
        The username or password is invalid. 
    </div>
    <div formGroupName="account">
        <div class="form-group">
            <label for="username">Username</label>
            <input 
            formControlName="username"
                id="username" 
                type="text" 
                class="form-control form-control-lg">
                <div *ngIf="username.pending">Checking for uniqueness...</div>
                <div *ngIf="username.touched && username.invalid" 
                     class="alert alert-danger">
                        <div *ngIf="username.errors.required">Username is required</div>
                        <div *ngIf="username.errors.minlength">
                            Username should be minimum  
                                {{ username.errors.minlength.requiredLength }}     
                            charatcers
                        </div>
                        <div *ngIf="username.errors.maxlength">
                            Username should be maximum  
                                {{ username.errors.maxlength.requiredLength }}     
                            charatcers
                        </div>
                        <div *ngIf="username.errors.cannotContainSpace">
                            Username can not contain space
                        </div>
                        <div *ngIf="username.errors.shouldBeUnic">
                            This username is already taken
                        </div>
                </div>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input 
            formControlName="password"
                id="password" 
                type="text" 
                class="form-control form-control-lg">
        </div>
    </div>
    <button class="btn btn-dark btn-lg" type="submit">
        Sign Up
    </button>
</form>

TS

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserNameValidators } from '../common/validators/username.validators';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.scss']
})
export class SignupFormComponent {
  form = new FormGroup({
    account: new FormGroup({
      username: new FormControl('', 
        Validators.required,
        UserNameValidators.shouldBeUnic,
      ),
      password: new FormControl('', Validators.required)
    })
  });

  get username() {
    return this.form.get('account.username');
  }
}