依赖于其他形式的控制

角2自定义验证我试图做一个自定义的验证我的FormControl mealType依赖于其他形式的控制

如果我FormControl category具有价值和mealType没有，mealType应该是无效的。

如果category没有值，mealType应该是有效的。

我得到一个控制台错误：

TypeError: Cannot read property 'get' of undefined

代码：

ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     categories: [null, Validators.required], 
     mealTypes: [null, this.validateMealType], 
     distanceNumber: null, 
     distanceUnit: 'kilometers', 
     keywords: null, 
    }); 
} 

validateMealType() { 
    if (this.findForm.get('categories').value) { 
     if (this.findForm.get('mealTypes').value) { 
      var mealTypeError = false; 
     } else { 
      var mealTypeError = true; 
     } 
    } else { 
     var mealTypeError = false; 
    } 

    return mealTypeError ? null : { 
     error: true 
    } 
}

这是我的形式，是不确定的。

我该如何解决这个问题？

尝试这样的：

validateMealType(categoryControl: FormControl, mealTypeControl: FormControl) { 
    if (categoryControl.value) { 
     if (!mealTypeControl.value) { 
      var mealTypeError = true; 
     } else { 
      var mealTypeError = false; 
     } 
    } else { 
     var mealTypeError = false; 
    } 

    return mealTypeError ? null : { 
     error: true 
    } 
}

但它会导致：

Error in app/find-page/subcomponents/find-page/find-form.component.html:36:5 caused by: Cannot read property 'value' of undefined

尝试这样的：

class MealTypeValidator { 

    constructor(private categoryFormControl: FormControl) { } 

    mealTypeValidator(control: FormControl): { [error: string]: any } { 
     if (this.categoryFormControl.value) { 
      if (!control.value) { 
       return { error: true }; 
      } 
     } 
    } 
}

在我的表单组件

则：

ngOnInit() { 
    this.findForm = this.formBuilder.group({ 
     categories: [null, Validators.required], 
     mealTypes: [null, new MealTypeValidator(this.findForm.get('categories').mealTypeValidator()], 
     distanceNumber: null, 
     distanceUnit: 'kilometers', 
     keywords: null, 
    }); 
}

但我有编译错误。我如何得到这个权利？我认为我对我所做的验证课和它的使用都有点偏差。

来源

2016-11-12 BeniaminoBaggins

你距离更近一步。

您需要将您的自定义验证连接到FormGroup相反，因为它需要知道两FormControl（categories和mealTypes），所以连接到FormGroup将给予验证更开阔的视野，并获得了整个FormControl

为了实现这一目标，改变你的ngOnInit到

ngOnInit() { 
    this.findForm = new FormGroup({ 
     mealTypes : new FormControl(null, Validators.Required), 
     categories : new FormControl(null) 
     // others form control here 
    }, validateMealType); // <-- see here is your custom function 
}

在上面的代码中，你确实有使用FormGroup构造函数，而不是FormBuilder，所以你可以在参数中附加您的自定义验证。此外，将您的自定义验证程序移到组件类之外。

查看此Plunker以获取有关您的特定情况的更多信息。

来源

2016-11-12 11:54:10 Michael

是否有可能有多个formgroup验证器？如果我想要另一个验证器，除了依赖于多个控件的“validateMealType”，该怎么办？ –

由@迈克尔提出的解决方案为我用的角4

在验证功能的微小的变化，我需要的参数类型从AbstractControl改变FormGroup因为AbstractControl在这个版本不包含控件集合。

function validateEqual(form: FormGroup): { [key: string]: boolean } { 
    const senha = form.controls['novaSenha']; 
    const confirmacaoSenha = form.controls['confirmacaoNovaSenha']; 

    if (senha != undefined && confirmacaoSenha != undefined) { 
    const senhaValue = senha.value; 
    const confirmacaoSenhaValue = confirmacaoSenha.value; 

    if (senhaValue !== confirmacaoSenhaValue) { 
     return { 'A senha e a confirmação não coincidem.': true}; 
    } 

    return null; 
    } 
}

谢谢你，@Ariel谁找到这篇文章。

来源

2017-11-02 19:37:41

依赖于其他形式的控制

回答

相关问题