JSON
[
{
"title": "Formula1",
"month": "2020-03",
"recieved_qty": 1020
},
{
"title": "NewFormula",
"month": "2020-03",
"recieved_qty": 10
}
]
Html: Here Months are hardcoded. Instead I need to dynamic month names based on current month. For Example => this month is March, should get March, April and May in a row dynamically. can you help me to do this?
<div class="d-flex flex-row">
<div style="font-size: 12px">Forecasted Product</div>
<div style="margin-left: 15%;">Jan 2020</div>
<div style="margin-left: 15%;">Feb 2020</div>
<div style="margin-left: 15%;">Mar 2020</div>
</div>
<div formArrayName="schedularList" *ngFor="let item of schedulerArray.controls; let i = index;">
<div [formGroupName]="i" class="add-div">
<div class="d-flex flex-row" style="width:160px">
<mat-form-field>
<mat-select placeholder="Formulation" formControlName="formulation">
<mat-option *ngFor="let item of formulationList" [value]="item.title"> {{item.title}} </mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput formControlName="quantity1" placeholder="Quantity">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="quantity2" placeholder="Quantity">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="quantity3" placeholder="Quantity">
</mat-form-field>
</div>
</div>
</div>
<div class="add-div" (click)="addItem()">
<span>Add Product for Forecast +</span>
<!-- <i class="material-icons" >add_circle_outline</i> -->
</div>
component.ts: This.formulationList will get JSON given above
I need to get 3 months based on current month dynamically. Then I need to match the month and patch the value of quantities declared in schedulerList formarray.
getRpsbasedOnMonth() {
const payload = {
company_id: this.userService.getUserdetails().CompanyUser.company_id.id
}
this.store.dispatch(new GetRPsBasedOnMonth(payload))
this.store.pipe(select(getRpsBasedOnMonthSuccess)).subscribe((result: any) => {
if (!!result) {
console.log(result)
this.formulationList = result.map(item => {
item.month = item.month.substring(5, 8)
return item
})
console.log(this.formulationList)
}
})
this.store.pipe(select(getRpsBasedOnMonthError)).subscribe((result: any) => {
if (!!result) {
console.log(result)
alert(result.error)
}
})
}