Angular 12 select box with default value, required validator and state-city dependency

import { Component, OnInit } from '@angular/core';

import { FormBuilder, Validators } from '@angular/forms';

@Component({

  selector: 'app-mycomponent',

  templateUrl: './mycomponent.component.html',

  styleUrls: ['./mycomponent.component.css']

})

export class MycomponentComponent implements OnInit {

  masterSexList = [{id : 1 , name : "Male"} , {id : 2 , name : "Female"}];

  masterStateList = [{id : 1 , name : "Maharashtra"} , {id : 2 , name : "Rajasthan"}];

  masterCityList  = [

      {id : 1 , name : "Mumbai" , stateId : 1},

      {id : 2 , name : "Pune", stateId : 1},

      {id : 3 , name : "Jaipur" , stateId : 2},

      {id : 4 , name : "Udaipur" , stateId : 2}

    ];

  cityList : any;

  frm  = this.fb.group({

    firstName : ["" ,

      [Validators.required , Validators.minLength(3) , Validators.maxLength(6)]

    ],

    lastName : ["" ,[Validators.required]],

    sex : [2 , [Validators.required]],  //Default value of 2 corresponds to Female

    state : ["" , [Validators.required]],

    city : ["" , [Validators.required]]

  });

  selectedStateId : number = 0;  

  selectedCityId : number = 0;

  selectedSexId : number = 0;

  constructor(private fb : FormBuilder) { }

  ngOnInit(): void {

    //THIS ALSO WORKS => you should pass the id of the object you want to be selected.

    //this.frm.get('sex')?.patchValue(1);

  }

  submit()

  {

    alert(

      this.frm.get('firstName')?.value + " " +

      this.frm.get('lastName')?.value + " " +

      this.selectedStateId + " " +

      this.selectedCityId + " " +

      this.selectedSexId

      );

  }

  onSexChange(sexChangeEvent: any)

  {

    this.selectedSexId = sexChangeEvent.target.value;

  }

  onCityChange(cityChangeEvent: any)

  {

    this.selectedCityId = cityChangeEvent.target.value;

  }

  onStateChange(stateChangeEvent: any)

  {

    this.selectedStateId = stateChangeEvent.target.value;

    if ( this.selectedStateId != undefined && this.selectedStateId != null

    && this.selectedStateId > 0)

      this.cityList = this.masterCityList.filter(x=>x.stateId == this.selectedStateId)

  }

}

<p>mycomponent works!</p>

<form [formGroup] = "frm" (ngSubmit)="submit()">

    <table>

        <tr>

            <td>

                <label>First Name</label>

            </td>

            <td>

                <input type="text" formControlName="firstName" />

            </td>

        </tr>

        <tr>

            <td>

                <label>Last Name</label>

            </td>

            <td>

                <input type="text" formControlName="lastName" />                

            </td>

        </tr>

        <tr>

            <td>

                <label>Sex</label>

            </td>

            <td>

                <select formControlName="sex" (change)="onSexChange($event)">

                    <option *ngFor="let sex of masterSexList; let  i = index" [value]="sex.id" >{{sex.name}}</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <label>State</label>

            </td>

            <td>

                <select formControlName="state" (change)="onStateChange($event)">

                    <option value="">Choose your state</option>

                    <option *ngFor="let state of masterStateList" [value]="state.id">{{state.name}}</option>

                </select>

            </td>

        </tr>

        <tr>

            <td>

                <label>City</label>

            </td>

            <td>

                <select formControlName="city" (change)="onCityChange($event)">

                    <option value="">Choose your city</option>

                    <option *ngFor="let city of cityList" [value]="city.id">{{city.name}}</option>

                </select>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <button type="submit"  [disabled] = "!frm.valid">Submit</button>

            </td>

        </tr>

    </table>

</form>