In my system, there is a table displaying student data with CRUD functions. Each row in the table has an Edit button.
<table class="table table-bordered table-striped">
<thead class="studentHeader">
<tr>
<td>Roll Number</td>
<td>First Name</td>
<td>Last Name</td>
<td>Gender</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let student of studentList;let i=index">
<td>{{student.rollNumber}}</td>
<td>{{student.firstName}}</td>
<td>{{student.lastName}}</td>
<td>{{student.gender}}</td>
<td><button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" (click)="editStudent(student)">Edit</button></td>
<td><button type="button" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
Below is the modal used for editing:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<form #studentForm="ngForm" novalidate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Student</h4>
</div>
<div class="modal-body">
<label path="rollnumber" class="sr-only">Roll Number</label>
<input type="text" id="rollNum" class="form-control" [(ngModel)]="studentObj.rollNumber" name="rollnumber" placeholder="Student Roll Number" required autofocus /><br>
<label path="firstName" class="sr-only">First Name</label>
<input type="text" id="firstname" class="form-control" [(ngModel)]="studentObj.firstName" name="firstname" placeholder="Student First Name" required /><br>
<label path="lastName" class="sr-only">Last Name</label>
<input type="text" id="lastname" class="form-control" [(ngModel)]="studentObj.lastName" name="lastname" placeholder="Student Last Name" required />
<h5><span class="label label-default">Gender</span>
<input type="radio" name="gender" id="male" value="Male" [(ngModel)]="studentObj.gender">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="Female" [(ngModel)]="studentObj.gender">
<label for="female">Female</label><br>
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)="addStudent(studentObj)" *ngIf="studentAdd">Add</button>
<button type="button" class="btn btn-default" data-dismiss="modal" *ngIf="studentUpdate" (click)="updateStudent(studentObj)">Update</button>
</div>
</div>
</form>
</div>
</div>
Lastly, here is the component code:
@ViewChild('studentForm') studentForm: NgForm;
private studentList: Array<StudentDto> = [];
private studentObj: StudentDto = {};
private departmentList: Array<string> = ["Computer Science", "Information Science", "Electronics", "Mechanical", "Civil"];
private studentAdd: boolean = true;
private studentUpdate: boolean = false;
constructor() { }
ngOnInit() {
this.studentList = StudentData;
}
private addStudent(addStudentObj: StudentDto): void {
this.studentList.push(addStudentObj);
this.studentForm.reset();
}
private editStudent(editStudentObj: StudentDto): void {
this.studentAdd = false;
this.studentUpdate = true;
this.studentObj = Object.assign({}, editStudentObj);
}
private updateStudent(updateStudentObj: StudentDto): void {
for(let i:number = 0; i<this.studentList.length; i++){
if(this.studentList[i].rollNumber == updateStudentObj.rollNumber){
this.studentList[i] = updateStudentObj;
}
}
this.studentForm.reset();
}
I am facing an issue where resetting the modal after adding/updating a student leads to the deletion of the corresponding row from the table. How can I reset the modal without affecting the table rows?