Question

我正在尝试在特定字段上创建条件必需的验证。我尝试通过在我的函数中返回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);

                }
            });
        };
    };

非常感谢任何帮助。

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

}

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

Answer 2

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

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

Answer 3

这些答案在大多数情况下都是有效的，但是我发现了一个很大的陷阱……在某些情况下，setValidators仅添加到现有的验证器数组中，无法很好地清除它们。在某些情况下，例如当ngOnInit连续加载两次时，对于所依赖的传入值，条件可能首先为负，然后为正。在这种情况下，您可以将其设置为必填，然后稍后尝试清除它，但是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…]);
}

Angular2：有条件的必要验证

3 个答案: