Angular 2 - 如果选中复选框，则使用条件验证字段答案

【问题标题】：Angular 2 - Validate fields with condition if checkbox is checkedAngular 2 - 如果选中复选框，则使用条件验证字段
【发布时间】：2017-02-16 19:02:06
【问题描述】：

我有一个复选框。如果选中，它将让用户选择该选项，如果未选中，它将允许用户使用文本字段添加新选项。

我在打字稿中有一个代码来验证字段。以下是我的代码：

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 字段将不需要验证。

我该怎么做？

【问题讨论】：

查看this question 的答案。我已经将条件验证的示例作为答案之一。也许这会有所帮助？

标签： validation angular

【解决方案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：未经测试。

【讨论】：