Validation on Modal

Question

Hi

  I have Modal Popup . I want to put Validations . How it can e done

<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">Create New Student</h1>
          <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-6">
              <label for="">Name</label>
              <!-- <input type="text" [(ngModel)]="studentObj.name" name="stuName" class="form-control-sm" placeholder="Name"
              #name="ngModel" required> -->
              <input type="text" class="form-control" [(ngModel)]="studentObj.name" name="name"
              #name="ngModel" required>
            </div>
            <span class="text-danger"
              *ngIf="name.touched && name.errors?.required">
              Name is required
            </span>
            <!-- <div style="color:red" 
                *ngIf="studentObj.name.errors && (studentObj.name.dirty || studentObj.name.touched)">    
                <p *ngIf="studentObj.name.errors.required">
                    Student Name is required
                </p>
            </div> -->
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">Mobile No</label>
              <input type="text" [(ngModel)]="studentObj.mobileno" class="form-control-sm" placeholder="Mobile No">
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">Email</label>
              <input type="text" [(ngModel)]="studentObj.email" class="form-control-sm" placeholder="Email">
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">City</label>
              <input type="text" [(ngModel)]="studentObj.city" class="form-control-sm" placeholder="City">
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">State</label>
              <input type="text" [(ngModel)]="studentObj.state" class="form-control-sm" placeholder="State">
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">PinCode</label>
              <input type="text" [(ngModel)]="studentObj.pincode" class="form-control-sm" placeholder="PinCode">
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <label for="">Address</label>
              <input type="text" [(ngModel)]="studentObj.address" class="form-control-sm" placeholder="Address">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <!-- <button type="button" class="btn btn-secondary" (click)="closeModal" data-bs-dismiss="modal">Close</button> -->
          @if(studentObj.id ==0){
          <button type="button" (click)="saveStudent()" class="btn btn-primary">Save Student</button>
          }
          @else {
            <button type="button" (click)="updateStudent()" class="btn btn-primary">Update Student</button>  
          }
        </div>
      </div>
    </div>
  </div>

export class Student {

  id:number;

  name:string;

  mobileno:string;

  email:string;

  city:string;

  state:string;

  pincode:string;

  address:string;

}

Thanks