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字段不需要验证，如果我选中了复选框，则geoLocationId字段将不需要验证。

我该怎么做？

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：未经测试。

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

1 个答案: