How to bind array of inputs checkbox when adding and updating - html

Question

I have an array with default values that are being used when creating a customer. By default, all the checkboxes(50,70,90) will be pre-selected from the back-end but not visible on the UI when adding a customer. But, when you edit, it must display all the checkboxes and the user can either un-check (50, 70, or 90%) and then update.
Process:
On Add customer:
Create customer
by default(you will have 3 checkboxes) from the view but hidden
All checkboxes will be selected (50,70 and 90%)
A user won't see the checkboxes as they are hidden.
User will see the checkbox on edit only.
Save info
Update:
from the view display/bind three checkboxes
All checkboxes will be selected because, on add, we have set them on the array.
A user will have the option to un-tick either (50,70, or 90%) checkboxes
And save with the new updated checkbox selection.
Thanks for your help
ts. My Object
public newCustomer: any = {
cont1: undefined,
--
--
balance: 0.0,
credit_limit_warning: [
{
type: "P",
warning_threshold: 50,
},
{
type: "P",
warning_threshold: 70,
},
{
type: "P",
warning_threshold: 90,
}
]
};
HTML : This is what i have tried on Adding but not working.
<div class="row" hidden>
<div class="col-lg-5 col-md-5 col-12">
<p class="color-white-60">
Notifications<br>
<small style="font-size: 12px;">(% of Credit Limit)</small>
</p>
</div>
<div *ngFor="let item of credit_limit_warning; let i = index;" hidden>
{{i}}
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" formControlName="'creditWarning50 + i'" [(ngModel)]="item.credit_limit_warning"/><label> 50 % </label></span>
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(70, false)" class="checkbox" type="checkbox" [name]="'creditWarning70' + i" [(ngModel)]="item.credit_limit_warning"/><label> 70 % </label></span>
<span style="padding-right: 10px;"> <input (click)="setCustomerCreditLimitWarning(90, false)" class="checkbox" type="checkbox" [name]="'creditWarning90' + i" [(ngModel)]="item.credit_limit_warning"/><label> 90 % </label></span>
</div>
</div>
HTML Update: this is the update html and i am not sure how i can tackle this.
<div class="col-lg-4 col-md-4 col-12">
<p class="color-white-60">
Contact Number
</p>
<input [(ngModel)]="customer.cont1" name="contactNumberEdit" placeholder="Contact Number" formControlName="contactNumber" class="form-control" type="text">
</div>
<div class="row" >
<div class="col-lg-5 col-md-5 col-12" >
<p class="color-white-60">
Usage Notifications<br>
<small style="font-size: 12px;">(% of Credit Limit)</small>
</p>
</div>
<div class="col-lg-7 col-md-7 col-12 mt-10" >
<span style="padding-right: 10px;"> <input name="usageNotification" formControlName="usageNotification" (click)="setCustomerCreditLimitWarning(50, false)" class="checkbox" type="checkbox" /><label> 50 % </label></span>
</div>
</div>