Validation in Modal

Question

Hi

  How to put validations. I am using Reactive form

<div class="modal" id="myModal" #myModal>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">New Employee</h1>
          <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
        </div>
        <form [formGroup]="form" (ngSubmit)="submit()"> 
          <div class="modal-body">
            <div class="form-group">
                <label for="name">Name</label>
                <input 
                    formControlName="empName"
                    id="empName" 
                    type="text" 
                    class="form-control">
                    
                    <!-- <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
                        <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
                        <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
                    </div> -->

                <label for="email">Email</label>
                <input 
                    formControlName="email"
                    id="email" 
                    type="text" 
                    class="form-control">

                <label for="empContactNo">Contact No</label>
                <input 
                formControlName="empContactNo"
                id="empContactNo" 
                type="text" 
                    class="form-control">
                <!-- <div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-danger">
                    <div *ngIf="f['email'].errors && f['email'].errors['required']">Email is required.</div>
                    <div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be 3 character.</div>
                </div> -->
                <label for="addressLine1">Address1</label>
                <input 
                    formControlName="addressLine1"
                    id="addressLine1" 
                    type="text" 
                    class="form-control">
                
                <label for="addressLine2">Address2</label>
                <input 
                    formControlName="addressLine2"
                    id="addressLine2" 
                    type="text" 
                    class="form-control">

                    <label for="pinCode">Pin Code</label>
                    <input 
                        formControlName="pinCode"
                        id="pinCode" 
                        type="text" 
                        class="form-control">
                    
                    <label for="city">City</label>
                    <input 
                        formControlName="city"
                        id="city" 
                        type="text" 
                        class="form-control">

                        <label for="state">State</label>
                        <input 
                            formControlName="state"
                            id="state" 
                            type="text" 
                            class="form-control">
                        
            </div>

          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" type="submit">Save</button>
            <!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
          </div>
        </form> 

      </div>
    </div>
  </div>

  employeeArray: any[] = [];
  objEmployee: any = {
    "empId":0,
    "empName": "",
    "empContactNo": "",
    "empEmail": "",
    "addressLine1": "",
    "addressLine2": "",
    "pinCode":"",
    "city": "",
    "state": "",
    
  }
  constructor(private empSrv:EmployeeService){}

  form = new FormGroup({
    empName: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    empContactNo: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    email: new FormControl('', [Validators.required, Validators.email]),
    addressLine1: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    addressLine2: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    pinCode: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    city: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),]),
    state: new FormControl('', [Validators.required, Validators.minLength(3),Validators.maxLength(50),])

  });
    
  get f(){
    return this.form.controls;
  }

Thanks