Notes

<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<form (ngSubmit)="onSubmit()" #patientForm="ngForm">

<div class="form-group">
<label for="firstname">First Name:</label>
<input type="text" id="firstname" required minlength="2" class="form-control" [(ngModel)]="patient.firstname" name="firstname" #firstname="ngModel">
<div *ngIf="firstname.invalid && firstname.touched" class="text-danger">
<div *ngIf="firstname.errors?.['required']">First Name is required</div>
<div *ngIf="firstname.errors?.['minlength']">First Name must be at least 2 characters long</div>
</div>
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" required minlength="2" class="form-control" [(ngModel)]="patient.lastname" name="lastname" #lastname="ngModel">
<div *ngIf="lastname.invalid && lastname.touched" class="text-danger">
<div *ngIf="lastname.errors?.['required']">Last Name is required</div>
<div *ngIf="lastname.errors?.['minlength']">Last Name must be at least 2 characters long</div>
</div>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" required class="form-control" [(ngModel)]="patient.age" name="age" #age="ngModel" min="10" max="60">
<div *ngIf="age.invalid && age.touched" class="text-danger">
<div *ngIf="age.errors?.['required']">Age is required</div>
<div *ngIf="age.errors?.['min'] || age.errors?.['max']">Age must be between 10 and 60</div>
</div>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" required class="form-control" [(ngModel)]="patient.dob" name="dob" #dob="ngModel">
<div *ngIf="dob.invalid && dob.touched" class="text-danger">Date of Birth is required</div>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" required class="form-control" [(ngModel)]="patient.gender" name="gender" #gender="ngModel">
<!-- <option value="" selected disabled hidden>Select a gender</option> -->
<option value="" selected disabled hidden>Choose here</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div *ngIf="gender.invalid && gender.touched" class="text-danger">Gender is required</div>
</div>
<div class="form-group">
<label for="phoneNo">Phone Number:</label>
<input type="text" id="phoneNo" required pattern="[0-9]{10}" class="form-control" [(ngModel)]="patient.phoneNo" name="phoneNo" #phoneNo="ngModel">
<div *ngIf="phoneNo.invalid && phoneNo.touched" class="text-danger">
<div *ngIf="phoneNo.errors?.['required']">Phone Number is required</div>
<div *ngIf="phoneNo.errors?.['pattern']">Phone Number must be 10 digits long</div>
</div>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" required minlength="10" class="form-control" [(ngModel)]="patient.address" name="address" #address="ngModel"> </textarea>
<div *ngIf="address.invalid && address.touched" class="text-danger">
<div *ngIf="address.errors?.['required']">Address is required</div>
<div *ngIf="address.errors?.['minlength']">Address must be at least 10 characters long</div>
</div>
</div>
<button type="submit" class="btn btn-primary mt-3" [disabled]="patientForm.invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
---------------------------------------------------------------------------------
import { Component } from '@angular/core';
import {PatientService } from '../services/patient.service';
import { Patient } from '../models/patient.model';
import { Gender } from '../models/Gender';



@Component({
selector: 'app-patient-form',
templateUrl: './patient-form.component.html',
styleUrls: ['./patient-form.component.scss']
})

export class PatientFormComponent {

patient: Patient = {
firstname: '',
lastname: '',
age: 18,
gender: Gender.Male,
phoneNo: '',
address: '',
dob: new Date() // initialize date of birth field
};
submitted = false;

constructor(private patientService: PatientService) { }
onSubmit(): void {
this.submitted = true;
this.patientService.addPatient(this.patient).subscribe({
next(response) { console.log(response); },
error(err) { console.error('Observable emitted an error: ' + err); },
complete() { console.log('Task completed'); }
});
}

}