Currently utilizing bootbox, I am able to retrieve the value from a prompt and display it using a callback function. However, I am facing an issue where I cannot set the same value in one of the form controls ('overallPercent') of 'addAssessmentForm'.
(I aim to assign the value obtained from the prompt input box on button click to a reactive form input box)https://i.sstatic.net/Mit79.pnghttps://i.sstatic.net/v2dyv.png https://i.sstatic.net/MDAWI.png
HTML Code :
<div>
<input type="checkbox" class="form-check-input" [attr.disabled]="disabledLocation" formControlName="rural" (click)="onRuralClick($event)" />
<label class="mx-2"> Rural</label>
</div>TS Code :
onRuralClick(e) {
let ans;
let ruralCheck = e.target.checked;
if (ruralCheck == true) {
bootbox.prompt({
title: "Enter Ratio",
size: 'small',
centerVertical: true,
buttons: {
cancel: {
label: '<i class="fa fa-times"></i>',
className: 'btn-danger',
},
confirm: {
label: '<i class="fa fa-check"></i>',
className: 'btn-success'
}
},
callback: function(result: number) {
ans = result;
console.log(ans);
},
});
// this.addAssessmentForm.controls['overallPercent'].setValue(ans);
}
}A method that initializes all form controls:
createForm() {
this.addAssessmentForm = this.fb.group({
assessmentId: [],
assessmentName: [
],
],
assessmentDescription: [null, [Validators.maxLength(200)]],
startDateCheck: [],
startDate: [],
endDateCheck: [],
endDate: [],
totalNumberOfDay: [this.calnumofDays, [Validators.required]],
class: [],
status: [true],
rural: [],
urban: [],
overallPercent: [],
});
}