How to bind array of inputs checkbox when adding and updating

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.

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>
                
                <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>