角度6反应形式FormGroup验证

问题描述 投票:1回答:1

尝试根据某些条件添加验证器。当条件为真时,我将添加所需的验证器并在其为假时将其删除。

    createReactiveForm(data: any) {
    const formGroup = new FormGroup({
        'control1': new FormControl(data.key1),
        'control2': new FormControl(data.key2)
    }, this.formValidators.bind(this)),
}


formValidators(formGroup: FormGroup){
    const control1Val: boolean = formGroup.controls['control1'].value;
    if (control1Val) {
        const control2: AbstractControl = formGroup.controls['control2'];
        constrol2.setValidators(Validators.required);
    } else {
        const control2: AbstractControl = formGroup.controls['control2'];
        constrol2.setValidators(() => null);
    }
}
  1. formValidators()方法被称为无限次 - 我是否在这里做错了什么?
  2. 当条件为真时,它会添加验证器并显示错误。但是当条件为false时,验证器将被删除,但控件上的错误仍然存​​在 - 原因是什么?
  3. 在formGroup中绑定方法formValidators()是一种好方法吗?

帮助我。

angular angular-reactive-forms reactive-forms
1个回答
0
投票
  1. 不,它调用每个变化检测周期/控制变化。
  2. 打电话给control.setErrors(null)
  3. 第二个参数需要一个函数。您的代码没有问题。

Validator函数应返回错误对象或null。我不建议将您的逻辑放在验证器函数中,因为它不是正确的位置。你可以听control1 valueChanges并将逻辑移到那里。这样,您将优化代码以仅在control1值更改时运行。

© www.soinside.com 2019 - 2024. All rights reserved.