This is html:
I'm retriving data using service in checkbox. if Y the checkbox will be checked. this is my edit page and i want to update status as Y if checked and N if uncheked.
<form [formGroup]="addTermForm">
<div class="container">
<div class="row ">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="rule">Incentive Type:</label>
<input type="text" class="form-control" placeholder="Enter incentive type"
formControlName="incentivetype_name"
[(ngModel)]="termDetails.incentivetype_name" [ngClass]="{ 'is-invalid': submitted && addTermForm.controls.incentivetype_name.errors }">
<div *ngIf="submitted && addTermForm.controls.incentivetype_name.errors" class="text-danger">
<div *ngIf="addTermForm.controls.incentivetype_name.errors.required">Please enter incentive type</div>
</div>
</div>
</div>
<br>
<br>
<div class="row ">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label>Status:</label>
<span style="padding-left: 10px;"></span>
<input type="checkbox"
(change)="statusValueChange($event)" style="margin-left: 10px;" [checked]="termDetails.incentivetype_status=='Y'" >
</div>
</div>
<!-- (change)="statusValueChange($event)" -->
<br>
<div class="row buttons">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="Submit" (click)="updateTerms()" class="savebtn" Value="Save" Style="width: 100px;"/>
<input type="button" class="savebtn" [routerLink]="['/incentiveTypes']" Value="Cancel" Style="width: 100px;"/>
</div>
</div>
</div>
</form>
This is my ts.
As of now, for active records it is showing checked on clicking edit record. When i edit the incentive term text box and save it. Status is by default takking as N eventhough(i don't change it).
Please help me with my code.
export class EditIncentiveTypeComponent implements OnInit {
addTermForm: FormGroup;
submitted = false;
loading = false;
incentivetype_id: number;
public globalResponse: any = [];
termDetails: any = [];
constructor(
private formBuilder: FormBuilder,
private router: Router,
private route: ActivatedRoute,
private termSrvc: ApiService
)
{
this.route.queryParams.subscribe(params => {
this.incentivetype_id = params.incentivetype_id;
console.log(this.incentivetype_id);
});
}
ngOnInit(): void {
this.termEditForm();
this.addTermForm = this.formBuilder.group({
incentivetype_name: ['', [Validators.required]],
// incentivetype_status: []
});
}
termEditForm(){
this.termSrvc.getIncentiveTypesById(this.incentivetype_id).subscribe(
response => {
this.globalResponse = response;
this.termDetails = this.globalResponse.response[0];
console.log(this.termDetails);
});
}
updateTerms(): any {
{
this.submitted = true;
if (this.addTermForm.invalid) {
return;
}
}
const termUpdate = new incentiveTypesModel(
this.termDetails.incentivetype_id,
this.termDetails.incentivetype_name,
this.incentivetype_status
);
this.termSrvc.updateIncentiveTypes(termUpdate).subscribe((res: any) => {
console.log('res', res);
if (res.status === 200) {
alert('Record updated successfully');
this.router.navigate(['incentiveTypes']);
}
else {
alert('Please check the details');
}
});
}
incentivetype_status = "";
statusValueChange(evt) {
let target = evt.target;
if (target.checked) {
this.incentivetype_status = "Y";
} else {
this.incentivetype_status = "N";
}
console.log(this.addTermForm.value);
}
Models.ts file is this:
export class incentiveTypesModel {
constructor(
public incentivetype_id: number,
public incentivetype_name: any,
public incentivetype_status: any
){}
}
Aucun commentaire:
Enregistrer un commentaire