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

Question

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

Answer 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()})
}
);

创建一个验证器Fn，用于检查阵列

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

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