I can not insert a record into firestore database using angular 12 - css

Question

There is no error showing when i run ng serve or ng build, but it can't still make a record. I am blown away. Please help me.
I can show you some relevant parts in which i made some changes.
i created a student class in model.ts file, then i created an instance of the class in service class. Afterward, in build component of html file i created the submit() method as shown below
model.ts
export class Students{
id!: string;
matricule!:string;
nom!: string;
prenom!: string;
Quartier!:string;
age!:number
}
student.service.ts
import { AngularFirestoreDocument } from '#angular/fire/compat/firestore';
import { Students } from './model';
#Injectable({
providedIn: 'root'
})
export class StudentService {
constructor() { }
formData: Students = new Students();
}
student.component.ts
import { AngularFirestore } from '#angular/fire/compat/firestore';
import { NgForm } from '#angular/forms';
import { StudentService } from 'src/app/shared/student.service';
#Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.scss']
})
export class StudentComponent implements OnInit {
constructor(public service:StudentService, private firestore:AngularFirestore)
{ }
ngOnInit(): void {
this.resetForm();
}
resetForm(form?:NgForm) {
if(form!= null) {
form.resetForm();
this.service.formData = {
id:'',
matricule:'',
nom:'',
prenom:'',
age:0,
Quartier:''
}
}
}
onSubmit(form:NgForm) {
let data = form.value;
this.firestore.collection('students').add(data);
this.resetForm(form);
}
}
student.component.html
<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
<div class="form-group">
<input name="matricule" #matricule="ngModel" [(ngModel)]="service.formData.matricule" class="form-control" placeholder="Matricule" required>
<div *ngIf="matricule.invalid && matricule.touched" class="validation-error">Ce chant est obligatoire</div>
</div>
<div class="form-group">
<input name="nom" #nom="ngModel" [(ngModel)]="service.formData.nom" class="form-control" placeholder="Nom" required>
<div *ngIf="nom.invalid && nom.touched" class="validation-error">Ce chant est obligatoire</div>
</div>
<div class="form-group">
<input name="prenom" #prenom="ngModel" [(ngModel)]="service.formData.prenom" class="form-control" placeholder="Prenom" required>
<div *ngIf="prenom.invalid && prenom.touched" class="validation-error">Ce chant est obligatoire</div>
</div>
<div class="form-group">
<input type="number" name="age" #age="ngModel" [(ngModel)]="service.formData.age" class="form-control" placeholder="Age" required>
<div *ngIf="age.invalid && age.touched" class="validation-error">Ce chant est obligatoire</div>
</div>
<div class="form-group">
<input name="Quartier" #Quartier="ngModel" [(ngModel)]="service.formData.Quartier" class="form-control" placeholder="Quartier" required>
<div *ngIf="Quartier.invalid && Quartier.touched" class="validation-error">Ce chant est obligatoire</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="form.invalid" class="btn btn-lg btn-block btn-info">SUBMIT</button>
</div>
</form>