Angular 8 个响应式表单验证器

Question

我的 Angular 8 应用程序中有一个 FormControl，如下所示：

this.closingOrderFormGroup = this._fb.group({
   final_price: new FormControl('', [ Validators.required ] ),
});

我尝试 add/remove Validators.required 动态地基于一些单选按钮检查如下：

radioChange( event ) { 
    const finalPriceControl: any = this.closingOrderFormGroup.get('final_price');

    if ( event.value == 'completed' ) {
      finalPriceControl.setValidators([Validators.required]);
    }
    else if ( event.value == 'rejected' ) {
      finalPriceControl.setValidators(null);
    }
  }

但是在设置 Validators null 之后，FormControl "status" 仍然无效。 我应该如何更改 FormControl 状态？

Answer 1

您可以订阅 angular 反应形式的价值变化。

ngOnInit() {
    this.loginForm = this.fb.group({
        final_price: ['', [ Validators.required ] ]
    });

    this.formControlValueChanged();

}

//这样订阅

formControlValueChanged() {
    const finalPriceControl = this.loginForm.get('final_price');
    this.loginForm.get('final_price').valueChanges.subscribe(
        (mode: string) => {
            console.log(mode);
            if (mode === 'completed') {
                finalPriceControl.setValidators([Validators.required]);
            } else if (mode === 'rejected') {
                finalPriceControl.clearValidators();
            }
            finalPriceControl.updateValueAndValidity();
        });
}

Hope this helps :)

Angular 8 个响应式表单验证器

Angular 8 Reactive Form Validators

angular-validation

angular-reactive-forms

angular-forms

angular8