依賴於其他形式的控制

角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

依賴於其他形式的控制

回答

相關問題