角度验证一对表单字段是否为空或两者都已填充

Question

我创建了一个包含 4 到 5 个字段的学生表单。对于联系电话，我有 2 个字段，国家代码和电话号码。如果用户只输入两个字段之一，即输入国家代码但没有输入电话号码，我想抛出错误，反之亦然。但是，如果两个字段都留空，则它是有效的，因为它们都是非强制性字段。我不知道我怎么能做到这一点。请帮忙。提前致谢。

这是我的模板：

<mat-form-field >
<input matInput type="number"   formControlName="countryCode" placeholder="Country Code(+)" name="countryCode" class="form-control" id="countryCode">
</mat-form-field>
<mat-form-field >
<input matInput type="number" formControlName="phnNumber" placeholder="Phone Number" name="phnNumber" class="form-control" id="phnNumber">
</mat-form-field>

我的表单组：

this.addForm = this.formBuilder.group({

      studentName: ['', Validators.required],
      phnNumber: new FormControl(''),
      countryCode: new FormControl(''),
    });

Answer 1

您可以创建一个自定义验证器，将其放在FormGroup 上作为一个整体而不是单个控件。您对FormBuilder 的调用变为：

this.addForm = this.formBuilder.group({

      studentName: ['', Validators.required],
      phnNumber: new FormControl(''),
      countryCode: new FormControl(''),
    }, { validators: myFormValidator });

然后您创建一个验证器（在同一个文件或其他地方并导出）：

export const myFormValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const phnNumber = control.get('phnNumber').value;
  const countryCode = control.get('countryCode').value;

  if (phnNumber && !countryCode || countryCode && !phnNumber) {
    return { 'phoneNumberError': true };
  } else {
    return null;
  }
};

这样，自定义验证器可以从整个组中获取所需的内容，而不是需要单独验证控件。