如果表单值与值匹配，则启用按钮答案

【问题标题】：Enable button if form value matches value如果表单值与值匹配，则启用按钮
【发布时间】：2021-07-01 12:34:37
【问题描述】：

当来自 formarray 控件数量的值等于来自的值时，我需要启用提交按钮。我的代码如下：

                                 <button *ngIf="i===0" pButton type="button"
                                            class="button-add" icon="pi pi-plus" pTooltip="Add"
                                            (click)="addNewRow()"
                                            tooltipPosition="bottom"></button>

                                    <button *ngIf="i!== 0" pButton type="button"
                                            (click)="deleteRow(i)"
                                            class="button-add" icon="pi pi-minus" pTooltip="Delete"
                                            tooltipPosition="bottom"></button>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>

  <button  pButton type="button" label="Submit"
                            (click)="onSubmit()"
                            class="button-add"></button>&nbsp;

ts 代码

 addNewRow() {
        this.formArr.push(this.());
    }

    deleteRow(index: number) {
        this.formArr.removeAt(index);
    }

【问题讨论】：

当你说amount等于json中的值时，你是什么意思？ json 是从哪里来的？

标签： html angular validation

【解决方案1】：

方法 1 - 构建函数来检查

为调用函数的按钮添加禁用

<button  pButton type="button" label="Submit"
                            [disabled]="!amountValid()"
                            (click)="onSubmit()"
                            class="button-add"></button>&nbsp;

如下创建函数

amountValid(): boolean {
    const paymentArray = this.paymentForm.get('paymentDetails') as FormArray;
    let totalValue = 0;

    paymentArray.controls.forEach((group: FormGroup) => {
      totalValue += +group.get('amount').value
    });

    if (totalValue == this.jsonValue) {
      console.log('true');
      return true;
    }

    return false;
  }

方法 2 - 使用验证器Fn（推荐）

使用 formArray 上的验证器构建表单

this.paymentForm = this.fb.group(
      {
        paymentDetails: this.fb.array([this.buildPaymentDetailsForm()], {validators: this.amountValidation()})
      }
    );

创建一个检查数组的validatorFn

amountValidation(): ValidatorFn {
    return (details: FormArray): { [key: string]: boolean } | null => {
      let totalValue = 0;
      details.controls.forEach((group: FormGroup) => {
        totalValue += +group.get('amount').value;
      });

      if (totalValue == this.jsonValue) {
        console.log('true');
        return null;
      }

      return { invalidAmount: true };
    };
  }

Stackblitz 示例：https://stackblitz.com/edit/angular-formarray-validatorfn-akejdu

【讨论】：