Angular 2中的條件驗證

Angular 2中的驗證非常簡單，非常棒。但是，如果選擇了其他字段，那麼如何使必填字段可選。Angular 2中的條件驗證

這裏是我的規則

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
});

我希望其他領域的要求被標記「非必需」如果引用號是由用戶提供的。

來源

2017-07-17 Cengkuru Michael

這裏是你如何可以動態添加或刪除驗證一些控制

private addValidator(control, validator) { 
    let existingValidators = control.validator; 
    control.setValidators(Validators.compose([existingValidators, validator])); 
    control.updateValueAndValidity(); 
    }

，並刪除驗證

private removeRequiredValidator(control, otherValidators) { 
    control.clearValidators(); 
    if (otherValidators) { 
     control.setValidators(otherValidators); 
    } 
    control.updateValueAndValidity(); 
    }

來源

2017-07-17 06:59:27 umar

利用setValidators來設置表單控件警戒/解除警戒驗證

import {FormControl, Validators, FormGroup} from "@angular/forms"; 

onRefNoEntered() { 
     if(this.contractsFilter.controls['refNo'].value && this.contractsFilter.controls['refNo'].valid) { 
      this.contractsFilter.controls['selectedContractType'].setValidators(null); 
      this.contractsFilter.controls['selectedYear'].setValidators(null); 
      this.contractsFilter.controls['selectedPde'].setValidators(null); 
     } 
     else { 
      this.contractsFilter.controls['selectedContractType'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedYear'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedPde'].setValidators(Validators.required); 
     } 
}

來源

2017-07-17 07:47:10

使用自定義驗證器和setValidators可能會非常迅速地變得非常複雜。我更願意配置驗證器，因爲它們可能是必需的，然後有條件地啓用或禁用它們。

究竟使用代碼：

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
});

然後，我會訂閱valueChanges爲refNo：

this.contractsFilter.controls['refNo'].valueChanges.subscribe(value => { 
    if (value) { // There is a refNo specified 
    this.contractsFilter.controls['selectedContractType'].disable(); 
    this.contractsFilter.controls['selectedYear'].disable(); 
    this.contractsFilter.controls['selectedPde'].disable(); 
    } else { 
    this.contractsFilter.controls['selectedContractType'].enable(); 
    this.contractsFilter.controls['selectedYear'].enable(); 
    this.contractsFilter.controls['selectedPde'].enable(); 
    } 
});

現在你的校驗都在一個一致的地方規定，你仍然可以控制是否驗證器是否執行。

來源

2017-10-31 13:49:47

Angular 2中的條件驗證

回答

相關問題