I have a FormArray with two controls selectItem which is a Checkbox and SelectAmount which is an Input text field. Initially, I am displaying default values from an Array of Objects in the Input field which is editable when checkbox is checked. Now, If I uncheck the checkbox then I want the Input field to display default value which is the reversalAmount property as shown in the code. Can anyone Please help me in this.
<ul formArrayName="items">
<li class="reverse-list-item" *ngFor="let option of reversePaymentOptions ; let i=index" [formGroupName]="i">
<div class="select-all">
<mat-checkbox formControlName="selectItem" [(ngModel)]="reversePaymentOptions[i].isChecked" (change)="getSelectedItem(option)"></mat-checkbox>
</div>
<div class="reverse-amount-change" *ngIf="togglePartialReversalWithdrawal && option.PartialWithdrawEnabled">
<div class="form-control-wrapper">
<mat-form-field class="form-full-width">
<mat-label>GBP</mat-label>
<input type="text" matInput formControlName="selectAmount" (focus)="onfocusAmount(reversePaymentOptions[i])" [(ngModel)]="reversePaymentOptions[i].reversalAmount">
</mat-form-field>
</div>
</div>
</li>
</ul>
this.reversePaymentOptions = [
{
thumb: './assets/images/withdrawal/visa.svg.png',
name: 'Visa',
cardType: 'cc',
reversalAmount: 20.00,
isChecked: false,
PartialWithdrawEnabled: true
},
{
thumb: './assets/images/withdrawal/trustly.svg.png',
name: 'Trustly',
cardType: 'noncc',
reversalAmount: 20.00,
isChecked: false,
PartialWithdrawEnabled: false
},
{
thumb: './assets/images/withdrawal/paypal.svg',
name: 'Paypal',
cardType: 'wallet',
reversalAmount: 10.00,
isChecked: false,
PartialWithdrawEnabled: true
},
{
thumb: './assets/images/withdrawal/skrill.svg.png',
name: 'Skrill',
cardType: 'noncc',
reversalAmount: 40.00,
isChecked: false,
PartialWithdrawEnabled: true
},
{
thumb: './assets/images/withdrawal/maestro.svg.png',
name: 'Maestro',
cardType: 'noncc',
reversalAmount: 10.00,
isChecked: false,
PartialWithdrawEnabled: true
},
{
thumb: './assets/images/withdrawal/mastercard.svg.png',
name: 'Master Card',
cardType: 'noncc',
reversalAmount: 30.00,
isChecked: false,
PartialWithdrawEnabled: true
}
];
ngOnInit() {
this.form = this.formBuilder.group({
items: this.formBuilder.array([])
});
this.data();
this.getTotalAmount();
}
get formArr() {
return this.form.get('items') as FormArray;
}
this.reversePaymentOptions.map(d =>
this.formArr.push(this.formBuilder.group({
selectItem: new FormControl(d.isChecked),
selectAmount: new FormControl(d.reversalAmount, [Validators.required, Validators.min(1),
Validators.max(d.reversalAmount)])
}))
);