Question

背景

我有一个包含多个字段的表单会影响彼此的验证。

举一个简单的例子，让我们采用一个带有CellNo（手机号码）和HomeNo（家庭联系号码）的简单表格。

两者都有应用验证来检测数字本身的有效性，但是： 如果输入了CellNo - 不需要HomeNo字段，，反之亦然。

我实现了对每个字段的 valueChanges 的订阅，然后根据每个字段的FormControl值更新每个字段的Validators，然后调用 updateValueAndValidity（）功能

但是，通过调用此函数，它会触发每个字段的valueChanges预订，从而导致无限循环。

问题

使用FormBuilder实现这一目标的最佳方法是什么？

修改1 ：在Plunkr中复制了我的问题。

打开控制台/ devtools以查看循环输出。被重复调用的函数是：

updatePhoneValidations() {
    console.log('Updating validations');
    let cellValidators = [Validators.pattern(this.PHONE_REGEX), Validators.maxLength(25)];
    if (this.inputForm.controls.HomeNo.value.length === 0) {
        this.inputForm.controls.CellNo.setValidators([...cellValidators, Validators.required]);
    } else {
        console.log('Removing CellNo');

        this.inputForm.controls.CellNo.setValidators([...cellValidators]);

    }
     this.inputForm.controls.CellNo.updateValueAndValidity();

    let homeNoValidators = [Validators.pattern(this.PHONE_REGEX), Validators.maxLength(25)];
    if (this.inputForm.controls.CellNo.value.length === 0 ) {
        this.inputForm.controls.HomeNo.setValidators([...homeNoValidators, Validators.required]);
    } else {
        console.log('Removing HomeNo', this.inputForm.controls.HomeNo);

        this.inputForm.controls.HomeNo.setValidators([...homeNoValidators]);

    }
     this.inputForm.controls.HomeNo.updateValueAndValidity();
}

Answer 1

问问题时可能不是这种情况，但是现在您可以使用选项emitEvent:false来防止发出新事件。

updateValueAndValidity({ emitEvent: false })

Angular 2 FormBuilder w /自定义/动态验证循环

1 个答案: