Как всплывающие флажки значения с помощью Angular?

Question

Я новичок в Angular и пытаюсь найти способ получить значения флажков из формы и показать их пользователю в режиме просмотра.Я попробовал некоторый код, но я получаю ошибки в консоли, которые "не могут прочитать свойства" push "и" toString () '".

add-customer.component.ts

public otherIncomes = [
        { code: 1, displayValue: 'RENTAL_INCOME', selected: false },
        { code: 2, displayValue: 'PARTNERSHIP_IN_BUSINESS', selected: false},
        { code: 3, displayValue: 'INVESTMENT_PROCEEDS', selected: false },
        { code: 0, displayValue: 'OTHER', selected: false },
];

const arrIncomeSources = popupData.CustomerEntity.otherIncomeSource.toString().**split**(',');
                this.otherIncomes.forEach(element => {
                    const idx = arrIncomeSources.findIndex(x => +x === element.code);
                    this.sourcesOfOtherIncome.**push**(new FormControl(idx >= 0));
                });

add-customer-account-information.component.html

<div class="mx-3" *ngFor="let income of sourcesOfIncome" >
        <mat-checkbox formControlName="incomeSources" value="income.code">
                    {{localizationService.language[income.displayValue] }}
        </mat-checkbox>
</div>

add-customer.component.ts

this.cusAccInfoTabFormGroup = this.formBuilder.group({
    incomeSources: this.sourcesOfOtherIncome,
 });

Answer 1

Вы должны использовать formArrayName для обработки массивов.

<div [formGroup]="cusAccInfoTabFormGroup">
    <div formArrayName="incomeSources">
        <div>
             <div *ngFor="let s of incomeSources.controls; let i = index" 
              [formGroupName]="i">
             here you can add your fields ....
        </div>
    </div>
</div>

в тс:

get incomeSources(): FormArray{
    return this.cusAccInfoTabFormGroup.get('incomeSources') as FormArray;
}