angular - FormArray 在复选框更改事件上显示输入字段的默认值

Question

我有一个带有两个控件的 FormArray，selectItem 是一个复选框，SelectAmount 是一个输入文本字段。最初，我在输入字段中显示对象数组的默认值，当复选框被选中时，该字段是可编辑的。现在，如果我取消选中该复选框，那么我希望 Input 字段显示默认值，即 reversalAmount 属性，如代码所示。任何人都可以请帮助我。

            <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)])
      }))
    );

标签： angularangular-reactive-formsformarray

Answer 1

由于您使用ngModel的reversalAmount值reversePaymentOptions将被更改，因此您无法检索原始值。所以让我们首先通过删除所有来解决这个问题ngModel（你不需要它）。请改用 Reactive Form 实现（您已经拥有）。

还要修改getSelectedItem()HTML 中的 以传递控件索引和checked状态：

<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" (change)="getSelectedItem(option, i, $event.checked)"></mat-checkbox> <-- Notice the extra parameters in getSelectedItem
      </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])" >
              </mat-form-field>
          </div>                            
      </div>
  </li>
</ul>

如果由于某种原因，您需要reversePaymentOptions对其reversalAmount进行修改，请创建一个新的非引用数组副本（使用 lodash 之类的东西cloneDeep）

在 TS 中，修改getSelectedItem：

getSelectedItem(option, index, checked) {
  ...
  if (!checked) {
   this.formArr.controls[index].get('selectAmount').setValue(this.reversePaymentOptions[index].reversalAmount);
  }
  
}