[ hi everyone please help with Angular Dynamic html row Auto increment Menu,(1) firstly i want to Patch some of the fields on the menu by the dropdown button(Item), then push all values into Form Group by name of (InvoiceLineItems) ,(2) then push the Form group(InvoiceLineItems) as an Array Field inside Another Form Group by name of(addCustomerInvoiceForm). Please help code goes as following.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { SchoolFeesService } from 'src/app/_services/school-fees.service';
class itemObject {
item: any;
unitPrice: number = 0;
quantity: number = 0;
}
@Component({
selector: 'app-add-customer-invoice',
templateUrl: './add-customer-invoice.component.html',
styleUrls: ['./add-customer-invoice.component.css']
})
export class AddCustomerInvoiceComponent implements OnInit {
CustomerInvoice: CustomerInvoice[];
addCustomerInvoiceForm: FormGroup;
listOfFamilies: FamilyGroups[];
listOfGuardians: Parent[];
listOfSchoolFees: SchoolFees[];
viewGuardians: boolean;
itemTotal: number;
itemObject=new itemObject()
itemsArray: Array<itemObject> = [
{item: "", unitPrice: 0, quantity: 0}
]
constructor(
private fb: FormBuilder,
private customerInvoiceService: CustomerInvoicesService,
private familyGroupService: FamilyGroupsService,
private guardianService: ParentService,
private schoolFeeService: SchoolFeesService,
private toastr: ToastrService,
private router: Router
) { }
ngOnInit() {
this.getFamilyGroups();
this.getSchoolFees();
this.initializeForm();
this.getItemTotal(this.itemObject);
console.log(this.itemsArray)
}
initializeForm() {
this.addCustomerInvoiceForm = this.fb.group ({
DateRaised: ['', Validators.required],
PaymentDueDate: ['', Validators.required],
FamilyGroupId: [0, Validators.required],
SubTotal: [],
DiscountDescription: [],
DiscountFactor: [],
DiscountAmount: [],
TotalDiscount: [],
GrandTotal: [],
invoiceLineItems: this.fb.array([])
})
}
get invoiceLineItems(): FormArray {
return this.addCustomerInvoiceForm.get("invoiceLineItems") as
FormArray
}
newInvoiceLineItem(): FormGroup {
return this.fb.group ({
schoolFeeId: '',
description: '',
quantity: '',
unitPrice: '',
totalAmount: [{value: '', disabled: true }, Validators.required],
customerInvoiceId: '',
})
}
addInvoiceLineItem() {
this.invoiceLineItems.push(this.newInvoiceLineItem());
}
removeInvoiceLineItem(i: number) {
this.invoiceLineItems.removeAt(i);
}
getSchoolFees() {
this.schoolFeeService.getSchoolFees().subscribe((fees : any) =>{
this.listOfSchoolFees = fees;
})
}
getSchoolFessById(feesid){
this.schoolFeeService.getSchoolFeeById(this.invoiceLineItems.
controls['FamilyGroupId'].value).subscribe((fees : any) =>{
this.listOfSchoolFees = fees;
})
}
}
` <div *ngFor="let lineItem of invoiceLineItems.controls; let i = index">
<span [formGroupName] = "i">
<tr>
<td>
<button class="btn btn-error" type="button"
(click)="removeInvoiceLineItem(i)">Remove</button>
</td>
<td>
<small>Item</small>
<select class="form-control eezebiz-form-control-
100" formControlName='schoolFeeId'style="width:
100%" id="txt-line-item" tabindex="2"
(change)="getSchoolFessById(
addCustomerInvoiceForm.
InvoiceLineItems.
controls['FamilyGroupId'].value)"
tabindex="1">
<option *ngFor="let fee of listOfSchoolFees"
[ngValue]="fee.id">
{{ fee.feeCode }} | {{fee.Description }}
</option>
</select>
</td>
<td>
<small>Quantity</small><br />
<app-text-inputsformControlName='quantity'
[label]='" quantity"' [id]='"txt-
quantity"' [tabIndex]='"5"'>
</app-text-inputs>
</td>
<td>
<small>Unit Price</small><br />
<app-text-inputs
formControlName='unitPrice'
[label]='"unitPrice"' [id]='"txt-
unitPrice"' [tabIndex]='"5"'>
</app-text-inputs>
</td>
<td>
<small>Total Amount</small><br />
<app-text-inputs
formControlName='totalAmount'
[label]='"totalAmount"' [id]='"txt-
totalAmount"' [tabIndex]='"5"'
aria-readonly="true">
{{ addCustomerInvoice.totalAmount }}
</app-text-inputs>
</td>
</tr>
</span>
</div>