Angular 2 - 如果複選框被選中，則使用條件驗證字段

我有一個複選框。如果選中它，將允許用戶選擇該選項，如果未選中，則會讓用戶使用文本字段添加新選項。Angular 2 - 如果複選框被選中，則使用條件驗證字段

我有一個打字稿中的代碼來驗證字段。以下是我的代碼：

this.complexForm = this.fb.group({ 
    "name":[null,Validators.required], 
    "isoAlpha2":[null,Validators.required], 
    "isoAlpha3":[null,Validators.required], 
    "isoNumeric":[null,Validators.required], 
    "languageId":[1,false], 
    "currencyId":[null,Validators.required], 
    "geoLocationId":[false,false], 
    "latitude":[null,Validators.required], 
    "longitude":[null,Validators.required], 
    "status":["Active",false] 
    });

默認爲讓用戶輸入latitude and longitude fields。這意味着複選框未被選中。

當用戶選中複選框時，用戶將被允許在下拉列表中選擇列出的地理位置。

現在我的問題是，如果我檢查複選框latitude和longitude字段不需要驗證，當我檢查複選框時，geoLocationId字段將不需要驗證。

我該怎麼做？

來源

2017-02-16 asHkER

看看[這個問題]的答案（http://stackoverflow.com/questions/42238639/angular-2-apply-validator-required-validation-on-some-condition/42239003#42239003）。我已經提供了一個有條件驗證的例子之一。也許這可能有幫助？ – JayChase

你可以做這樣的事情：

<input type="checkbox" (change)="handleValidation($event)"

組件：

handleValidation($event: any): void { 
    const latitude: FormControl = this.complexForm.get('latitude'); 
    const longitude: FormControl = this.complexForm.get('longitude'); 
    const geoLocationId: FormControl = this.complexForm.get('geoLocationId'); 
    const requiredValidator: any = Validators.required; 
    const nullValidator: any = Validators.nullValidator; 

    if ($event.target.value) { 
    latitude.setValidators(nullValidator); 
    longitude.setValidators(nullValidator); 
    geoLocationId.setValidators(requiredValidator); 
    } else { 
    latitude.setValidators(requiredValidator); 
    longitude.setValidators(requiredValidator); 
    geoLocationId.setValidators(nullValidator); 
    // Maybe you to clean the value.. so it must be `geoLocationId.patchValue(''); 
    } 

    latitude.updateValueAndValidity(); 
    longitude.updateValueAndValidity(); 
    geoLocationId.updateValueAndValidity(); 
}

PS：沒有測試。

來源

2017-02-16 11:02:06 developer033

Angular 2 - 如果複選框被選中，則使用條件驗證字段

回答

相關問題