Question

我正在使用Angular 6和Material形式。

在一个div中，有3个字段，2个日期选择器和1个输入文本字段。我们只需要如果在字段中输入了一个值，那么所有值都必须是必填项。

我尝试过的方法是：

HTML

 if (resultCode == RESULT_OK && data.getData()!=null) {

Component.ts onInit（）我将自定义验证器设置为：

<div class="flex-container PromotionalPriceInfo">

    <span class="flex-item bold small">Promotional</span>

    <mat-form-field class="flex-item">

        <input matInput [matDatepicker]="promotionalPriceStartDatePicker" placeholder="Promotional Price Start Date" formControlName="promotionStartDate"
        />

        <mat-datepicker-toggle matSuffix [for]="promotionalPriceStartDatePicker"></mat-datepicker-toggle>

        <mat-datepicker #promotionalPriceStartDatePicker></mat-datepicker>

    </mat-form-field>

    <mat-form-field class="flex-item">

        <input matInput [matDatepicker]="promotionalPriceEndDatePicker" placeholder="Promotional Price End Date" formControlName="promotionEndDate"
        />

        <mat-datepicker-toggle matSuffix [for]="promotionalPriceEndDatePicker"></mat-datepicker-toggle>

        <mat-datepicker #promotionalPriceEndDatePicker></mat-datepicker>

    </mat-form-field>

    <mat-form-field class="flex-item">

        <input matInput type="number" placeholder="New Price" formControlName="promotionPrice" />

    </mat-form-field>

</div>

自定义验证程序代码为：

this.storeServiceForm.get('promotionStartDate').setValidators(requiredPromotionalFields);

this.storeServiceForm.get('promotionEndDate').setValidators(requiredPromotionalFields);

this.storeServiceForm.get('promotionPrice').setValidators(requiredPromotionalFields);

加载页面时，如果任何字段中都有一个值，那可以很好地工作，但是当任何字段中的值发生变化时，它不会重新验证其他字段

如果我将以下代码用作：

export function requiredPromotionalFields(control: FormControl) {
    const promotionStartDate = control.parent.get('promotionStartDate').value;
    const promotionEndDate = control.parent.get('promotionEndDate').value;
    const promotionPrice = control.parent.get('promotionPrice').value;
    return ((!promotionStartDate && !promotionEndDate && !promotionPrice) || control.value) ? null : {
        required: true
    };
}

但是上面的代码分解为错误，例如超过了最大调用堆栈大小。仅第一次更改任何值，然后才进行价格更改而不是其他字段的验证。并挂起浏览器。

这可以解决，还是有其他方法吗？

Answer 1

您需要在第二个updateValueValidity方法中添加参数，因为您正在订阅要更新的值。如此循环无限。

参数为{emitEvent: false;} https://angular.io/api/forms/AbstractControl#updateValueAndValidity

对Angular 6中的字段进行自定义所需的验证

1 个答案: