I am encountering an issue with the normal input fields on my page:
https://i.stack.imgur.com/qigTr.png
Whenever I click on the "+" button, it triggers an action which in turn calls a service class with simple JSON data. My intention is to set selectionCustomOffice.custOfficeName to the value of the JSON data's custOffcName, but unfortunately, I keep getting an undefined result.
addedO(selectionCustomOffice: SelectionCustomOffice) {
this.scoe = true;
this.selectionCustomOfficeService.getSingleCustomOffice(selectionCustomOffice.customOfficeId).subscribe((data)=> {
console.log("entered");
selectionCustomOffice.custOfficeName = data.custOffcName;
console.log(selectionCustomOffice.custOfficeName);
}, (error)=> {
console.log(error);
});
this.empList.push(selectionCustomOffice);
this.selectionCustomOffice = new SelectionCustomOffice();
console.log(this.empList);
}
this.selectionCustomOfficeService.getSingleCustomOffice(selectionCustomOffice.customOfficeId).subscribe((data)=> {
console.log("entered");
selectionCustomOffice.custOfficeName = data.custOffcName;
console.log(selectionCustomOffice.custOfficeName);
}, (error)=> {
console.log(error);
});
https://i.stack.imgur.com/AMZVN.png
SelectionCustomOffice.ts
export class SelectionCustomOffice {
id: number;
fromDate: string;
toDate: string;
consignmentNo: number;
selectionId: number;
customOfficeId: number;
custOfficeName: string;
}
The form for sending data looks like this, with the custom office field as a select dropdown:
<div class="form-group row">
<div class="col-md-4">
<label>Custom Office</label>
</div>
<div class="col-md-2">
<label>From Date</label>
</div>
<div class="col-md-2">
<label>To Date</label>
</div>
<div class="col-md-4">Consignment No</div>
<div class="col-md-4">
<select class="form-control" id="customOfficeId" required [(ngModel)]="selectionCustomOffice.customOfficeId" name="customOfficeId"
>
<option *ngFor="let title of customoffices" [value]="title.custOfficeId">{{title.custOffcName}}</option>
</select>
</div>
<div class="col-md-2">
<input type="date" class="form-control" id="fromDate" required [(ngModel)]="selectionCustomOffice.fromDate" name="fromDate" />
</div>
<div class="col-md-2">
<input type="date" class="form-control" id="toDate" required [(ngModel)]="selectionCustomOffice.toDate" name="toDate" />
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="consignmentNo" required [(ngModel)]="selectionCustomOffice.consignmentNo" name="consignmentNo">
</div>
<div class="col-md-1">
<button type="button" (click)="addedO(selectionCustomOffice)">+</button>
</div>
</div>
Service Class
getSingleCustomOffice(id: number): Observable<any> {
return this.http.get(`${this.baseUrl}/${id}`, { responseType: 'text' });
}