I'm showing data from service in grid. I'm showing data from studentsInfo array using ngfor in grid. Records with status 'Y' will be shown as present. Records with status N will be coming with a button "click to present". Now, i'm trying to to implement add functionality for records in the grid using index, on click of the button for only that particular record having a button.. I used formgroup: SearchForm, to submit the values. I only need to send the values of id and roll_no only while adding, as service is designed only for those 2 fields. As, of now, when i click on the button, i'm getting empty values. Please help me achieve the functionality.
<table style="width: 1000px; float: left">
<tbody>
<tr>
<td>
<div *ngIf="showdata == true">
<table>
<thead>
<tr>
<th> Id </th>
<th> name </th>
<th> Roll_no </th>
<th> section_name </th>
<th> Status </th>
</tr>
</thead>
</table>
<form [formGroup]="SearchForm" >
<div class="col-md-8" style="padding-left: 0px">
<div class="contentss">
<table>
<tbody>
<ng-container *ngIf="studentsInfo| Filter : Srch: Columns :'abc' as studentData; else noItems">
<tr *ngFor="let list of studentData ; let i = index">
<td style="width: 100px">
<div style="margin-left: 50px">
<span>{{ i }}</span>
</div>
</td>
<td>
<div>
<span formControlName="id" name="id" ngDefaultContro>{{ list.Id }}</span>
</div>
</td>
<td>
<div>
<span>{{ list.name }}</span>
</div>
</td>
<td>
<div>
<span formControlName="Roll_no" name="Roll_no">{{ list.Roll_no }}</span>
</div>
</td>
<td>
<div>
<span>{{ list.section_name }}</span>
</div>
</td>
<td *ngIf=" list.Status === 'Y'; else elseBlock">
<div>
<span>Present</span>
</div>
</td>
<ng-template #elseBlock>
<td >
<div>
<span>
<input type="submit" value="Click to present" ((click)="onAcceptClick(i)">
</span>
</div>
</td>
</ng-template>
</tr>
<ng-container *ngIf="!studentData.length && hide" [ngTemplateOutlet]="noItems"></ng-container>
</ng-container>
<ng-template #noItems>
<tr><td colspan="9" style="text-align: center;">No students Available!</td></tr>
</ng-template>
</tbody>
</table>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
studentsInfo: any = [];
id: number;
studentList(id){
const obj = {
ID: this.selected
};
this.inceSrvc.postmethod('students/get',obj).subscribe((res:any)=>{
if (res.status === 200) {
const students = res.response;
if (students) {
this.studentsInfo = res.response;
}
}
});
}
SearchForm: FormGroup;
public globalResponse: any = [];
onAcceptClick(){
if (this.SearchForm.invalid) {
alert('Please check the details');
return;
}
const obj = {
id : this.SearchForm.value.id,
roll_no : this.SearchForm.value.roll_no,
}
this.inceSrvc.postmethod('students',this.SearchForm.value).subscribe((response:any)=>{
this.globalResponse = response;
if(this.globalResponse.status === 200)
{
alert('Record updated');
}
});
}
}
service that is body of api,
{
"id": "2",
"roll_no": "21"
}
The use of a form is not the correct approach here. What you essentially have in your code is a list of students, and your form is set up to capture a single set of values.
All you need is a button, through which you would need pass on the "id" and "roll_no" from the corresponding row and send it across to your method on your component.
So get rid of the form tag in the HTML, and the corresponding formGroup definition in the TS file.
As a rough example, see sample code below:
<ng-template #elseBlock>
<td >
<div>
<span>
<button type="button" (click)="onAcceptClick(i, list.Id, list.Roll_no)">Click to present</button>
</span>
</div>
</td>
</ng-template>
On your TS file:
onAcceptClick(index: number, id: string, roll_no: string) {
if (!index || !id || !roll_no) {
return alert('Please check');
}
// rest of your code with index value
}
So your HTML will be like:
table >
row1 > index 0 > id 100 > roll_no 121 > button(0, 100, 121)
row2 > index 1 > id 100 > roll_no 122 > button(1, 100, 122)
row3 > index 2 > id 100 > roll_no 122 > button(2, 100, 123)