Angular2：有条件的验证

Posted 2023-03-13

【中文标题】Angular2：有条件的验证

【英文标题】：Angular2: Conditional required validation

【发布时间】：2017-04-14 15:44:20

【问题描述】：

我正在尝试在特定字段上创建有条件的必需验证。我尝试通过在我的函数中返回 Validators.required 来执行此操作，但这似乎不起作用。我该怎么做呢？这是我的代码：

private _ansat: AbstractControl = new FormControl('', Validators.required);
private _helbred: AbstractControl = new FormControl('', Validators.compose([this.useValidateIfRadio(this._ansat, 0, Validators.required)]) );


constructor(private _fb: FormBuilder) 
    this.myForm = this._fb.group(
            ansat: this._ansat,
            helbred: this._helbred
        );


useValidateIfRadio (c: AbstractControl, n: number, v) 
        return function (control) 
            return new Promise(resolve => 
             // this.msg = ansatControl.value;
             console.log(v);
                if (c.value === n) 

                    resolve(v);
                
                else 
                  resolve(null);

                
            );
        ;
    ;

非常感谢任何帮助。

【问题讨论】：

你解决了吗？我已经添加了一个答案，并且很好奇您是否以相同的方式（甚至以更好的方式）解决了它

我用一个可重用的自定义验证器解决了一个类似的问题，如下所示：Conditional Required

啊，这看起来很天才！我会测试你的解决方案！

【参考方案1】：

我遇到了类似的问题，但找不到答案。由于还没有人回答这个问题，我将提供一个示例来说明我是如何解决我的问题的，以及如何使用相同的解决方案来解决问题。

示例：（仅当未设置电子邮件时才需要电话号码）

export class UserComponent implements OnInit 

userForm: FormGroup;

constructor(private fb: FormBuilder) 

ngOnInit() 

    //Create my userForm and and add initial validators
    this.userForm = this.fb.group(
        username: [null, [Validators.required]],
        name: [null, [Validators.required]],
        email: [],
        phoneNumber: [null, [Validators.required, Validators.minLength(4)],
    );

    //Listen to email value and update validators of phoneNumber accordingly
    this.userForm.get('email').valueChanges.subscribe(data => this.onEmailValueChanged(data));



onEmailValueChanged(value: any)
    let phoneNumberControl = this.userForm.get('phoneNumber');

    // Using setValidators to add and remove validators. No better support for adding and removing validators to controller atm.
    // See issue: https://github.com/angular/angular/issues/10567
    if(!value)
        phoneNumberControl.setValidators([Validators.required, Validators.minLength(4)]);
    else 
        phoneNumberControl.setValidators([Validators.minLength(4)]);
    

    phoneNumberControl.updateValueAndValidity(); //Need to call this to trigger a update

因此，在您的情况下，您应该向“_ansat”添加一个等于我的电子邮件侦听器的 changeListener，然后相应地将 required 添加到“_helbred”。

【参考方案2】：

只需为该字段添加验证器：

if(some_logic) 
 this.your_form.get('field_name').setValidators([Validators.required]);

【参考方案3】：

这些答案让我了解了大部分情况，但我发现了一个很大的问题……在某些情况下，setValidators 只会添加到现有的验证器数组中，并不能很好地清除它们。在某些情况下，例如当 ngOnInit 连续加载两次时，对于您所依赖的传入值，条件可能首先是负数，然后是正数。在这种情况下，您将其设置为 required，然后尝试清除它，但 UI 仍会像预期的那样运行。要解决此问题，请考虑以下...

const myControl = this.your_form.get('field_name');
if(some_logic) 
     myControl.clearAsyncValidators();
     myControl.clearValidators();
     myControl.updateValueAndValidity(onlySelf:true);
 else 
     myControl.setValidators([Validators.required, Validators.other…]);