Angular 6+中的条件字段验证取决于选择字段的值

时间:2019-01-28 10:40:31

标签: angular forms validation

我正在尝试执行可选字段,仅对于选择框的某些值才需要。我以为我已经接近了,但是在验证时并没有填充值。

requiredForTypeValidator = 
    (values) => 
        (control: any): {[key: string]: boolean} | null => {

    const ticket_type = control.parent ? control.parent.value.type : '';
    if (control.value !== undefined && ((control.value === null || control.value.length < 1) && values.indexOf(ticket_type) !== -1)) {
        return {'required': true};
    }
    return null;
}

 ngOnInit() {
    this.createTicketForm = this.formBuilder.group({
        type: [null, Validators.required],
        optField: [null, this.requiredForTypeValidator(['validate_me','validate_me_too'])],
    });
 }

根据要求,我在stackblitz上重新创建了此问题: https://stackblitz.com/edit/angular-nt8hjw

1 个答案:

答案 0 :(得分:1)

这是您遇到问题stackblitz的有效解决方案。

基本上,我创建一个新功能,该功能订阅下拉更改并更新从属字段的验证器。

private setValidators(): void {
    this.createTicketForm.get('type').valueChanges.subscribe(
    (result) => {
      if ( result ==='Check me') {
        this.createTicketForm.get('optField').setValidators(Validators.required);
        console.log('validator set');
      } else {
        this.createTicketForm.get('optField').setValidators(null);
      }
      this.createTicketForm.get('optField').updateValueAndValidity();
    }
   );
}