角2 - チェックボックスがオンの場合、条件付きフィールドを検証します。

Question

私はチェックボックスを持っています。チェックされていれば、オプションで選択することができます。チェックされていない場合は、テキストフィールドを使用して新しいオプションを追加することができます。

フィールドを検証するためのコードがtypescriptにあります。以下は私のコードです：

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フィールドには検証が必要なくなり、チェックボックスをオンにすると検証フィールドは不要になります。

どうすればいいですか？

Answer 1

あなたはこのような何かを行うことができます。

<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：テストされていません。