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

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;
  }
};

这样自定义验证器从整个组中获取它需要的东西，而不是需要单独验证控件。