Creating FormGroup inside FormGroup in Angular

teamForm = this.formBuilder.group({
	teamLead: this.formBuilder.group({
		empName: ['', Validators.required],
		age: ['', [Validators.required, Validators.min(18)]],
		city: ['', Validators.required]
	}),
	------
}); 

<div formGroupName="teamLead" class="employee"> 
  <b>Team Lead:</b> 
  <p>Name  : <input formControlName="empName">
	<label *ngIf="teamLead.get('empName')?.hasError('required')" class="error">
	  Name required. </label>
	</p>
  <p>Age : <input formControlName="age">
	<label *ngIf="teamLead.get('age')?.hasError('required')" class="error">
	  Age required. </label>
	<label *ngIf="teamLead.get('age')?.hasError('min')" class="error">
		Minimum age is 18. </label>
  </p>
  <p>City : <input formControlName="city">
	<label *ngIf="teamLead.get('city')?.hasError('required')" class="error">
	  City required. </label>
  </p>
</div> 

<h3>Create New Team</h3>
<div class="team">
  <form [formGroup]="teamForm" (ngSubmit)="onFormSubmit()">
    <p><b>Team Name : </b> <input formControlName="teamName">
      <label *ngIf="teamName?.hasError('required')" class="error">
        Team name required. </label>
    </p>
    <p><b>No. of Emp : </b> <input formControlName="noOfEmp">
      <label *ngIf="teamName?.hasError('required')" class="error">
        No. of Emp required. </label>
    </p>
    <div formGroupName="teamLead" class="employee"> 
      <b>Team Lead:</b> 
      <p>Name  : <input formControlName="empName">
        <label *ngIf="teamLead.get('empName')?.hasError('required')" class="error">
          Name required. </label>
        </p>
      <p>Age : <input formControlName="age">
        <label *ngIf="teamLead.get('age')?.hasError('required')" class="error">
          Age required. </label>
        <label *ngIf="teamLead.get('age')?.hasError('min')" class="error">
            Minimum age is 18. </label>
      </p>
      <p>City : <input formControlName="city">
        <label *ngIf="teamLead.get('city')?.hasError('required')" class="error">
          City required. </label>
      </p>
    </div>
    <div formGroupName="department" class="employee"> 
      <b>Department:</b> 
      <p>Department Head : <input formControlName="deptHead">
        <label *ngIf="department.get('deptHead')?.hasError('required')" class="error">
          Department Head required. </label>
      </p>
      <p>Department Name : <input formControlName="deptName">
        <label *ngIf="department.get('deptName')?.hasError('required')" class="error">
          Department Name required. </label>
      </p>
    </div>
    <button>SUBMIT</button>
  </form>
</div> 

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators, FormBuilder, FormGroup } from '@angular/forms';
import { TeamManagementService } from './team-management.service';

@Component({
	selector: 'app-team',
	templateUrl: './team-management.component.html'
})
export class TeamManagementComponent implements OnInit {
	constructor(
		private formBuilder: FormBuilder,
		private teamMngService: TeamManagementService) {
	}
	ngOnInit() {
	}
	teamForm = this.formBuilder.group({
		teamName: ['', Validators.required],
		noOfEmp: ['', Validators.required],
		teamLead: this.formBuilder.group({
			empName: ['', Validators.required],
			age: ['', [Validators.required, Validators.min(18)]],
			city: ['', Validators.required]
		}),
		department: this.formBuilder.group({
			deptHead: ['', Validators.required],
			deptName: ['', Validators.required]
		})
	});
	get teamName() {
		return this.teamForm.get('teamName') as FormControl;
	}
	get noOfEmp() {
		return this.teamForm.get('noOfEmp') as FormControl;
	}
	get teamLead() {
		return this.teamForm.get('teamLead') as FormGroup;
	}
	get department() {
		return this.teamForm.get('department') as FormGroup;
	}
	onFormSubmit() {
		if (this.teamForm.valid) {
		  this.teamMngService.saveTeam(this.teamForm.value);
	          this.teamForm.reset();
		}
	}
} 

import { Injectable } from '@angular/core';
import { Team } from './team';
@Injectable()
export class TeamManagementService {
	saveTeam(team: Team) {
		console.log('------------TEAM------------');
		console.log('Team Name: ' + team.teamName);
		console.log('Team Size: ' + team.noOfEmp);
		console.log('----- Team Lead -----');
		console.log('Emp Name: ' + team.teamLead.empName);
		console.log('Emp Age: ' + team.teamLead.age);
		console.log('Emp City: ' + team.teamLead.city);
		console.log('----------department---------');
		console.log('Department Head: ' + team.department.deptHead);
		console.log('Department Name: ' + team.department.deptName);
	}
} 

import { Department } from "./department";
import { Employee } from "./employee";
export interface Team {
	teamName: string;
	noOfEmp: number;
	teamLead: Employee;
	department: Department;
}
 

export interface Employee {
	empName: string;
	age: number;
	city: string;
} 

export interface Department {
	deptHead: string; 
	deptName: string;
} 

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
           <app-team></app-team>
          `
})
export class AppComponent {
} 

.team {
	border: 3px solid black;
	width: 500px;
}
.employee {
	border: 2px solid blue;
	width: 480px;
}
.error{
        color: red;
} 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TeamManagementComponent } from './team-management.component';
import { TeamManagementService } from './team-management.service';

@NgModule({
      imports: [
            BrowserModule,
            ReactiveFormsModule
      ],
      declarations: [
            AppComponent,
            TeamManagementComponent
      ],
      providers: [
            TeamManagementService
      ],
      bootstrap: [
            AppComponent
      ]
})
export class AppModule { }