Я предложил другой подход, [ngModel] standalone , который получает значение reverse или значение formControl. Единственное, что вам нужно принять во внимание, - это при отправке значения в api проверять значения массива, и если он не отмечен, укажите значение по умолчанию
puff, в коде нам нужна одна функция для получения formArray
get itemsArray()
{
return this.form.get('items') as FormArray
}
Наш. html должен быть похож (смотрите, что мы перебираем itemsArray.controls). Обратите внимание: поскольку наша переменная, используемая для итерации по массиву, равна group, мы можем получить доступ к значению FormControl как group.get('selectItem') и group.get('selectAmount') (*)
<form [formGroup]="form">
<ul formArrayName="items">
<li class="reverse-list-item" *ngFor="let group of itemsArray.controls ; let i=index" [formGroupName]="i">
<div class="select-all">
<mat-checkbox formControlName="selectItem">
{{reversePaymentOptions[i].name}}
</mat-checkbox>
</div>
<div class="reverse-amount-change">
<div class="form-control-wrapper">
<mat-form-field class="form-full-width">
<mat-label>GBP</mat-label>
<input type="text" matInput
[ngModel]="group.get('selectItem').value?
group.get('selectAmount').value:
reversePaymentOptions[i].reversalAmount"
(ngModelChange)="group.get('selectItem').value &&
group.get('selectAmount').setValue($event)"
[ngModelOptions]="{standalone:true}"
>
</mat-form-field>
</div>
</div>
</li>
</ul>
</form>
Ah !, не забудьте в submit сделать что-то вроде
submit(form:FormGroup)
{
if (form.valid)
{
form.value.items.forEach((x:any,index:number)=>{
if (!x.selectItem)
x.selectAmount=this.reversePaymentOptions[index].reversalAmount
})
}
}
(*) В некоторых версиях angular, в соответствии с ограничением машинописного текста, дайте ошибку, напрямую используйте переменную, перебирая элементы управления. Если это ваш случай, создайте вспомогательную функцию
getGroup(index:number)
{
return (this.itemsArray.at(index) as FormGroup)
}
и замените group.get(...) на getGroup(i).get(...)
a очень-очень уродливый stackblitz
Обновление иногда я забываю, что использую материал- angular, и вы можете получить / установить значение входных данных, используя [значение] и (изменить). Таким образом, вы можете использовать
<input type="text" matInput [disabled]="!group.get('selectItem').value"
[value]="group.get('selectItem').value?
group.get('selectAmount').value:
reversePaymentOptions[i].reversalAmount"
(change)="group.get('selectItem').value &&
group.get('selectAmount').setValue($event.target.value)"
>