javascript - angular 驗證一對表單欄位是空的或兩者都已填寫

我已經建立了一個包含四到五個欄位的學生表單。對於聯絡電話，我有兩個欄位，分別是國碼和電話號碼。如果使用者只輸入其中一個欄位，例如輸入了國碼但未輸入電話號碼，或者反之，我希望能夠顯示錯誤。然而，如果兩個欄位都留空，則視為有效，因為這兩個欄位都不是必填。我不知道該如何實現這個功能。請幫忙，非常感謝。

這是我的範本：

<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(''),
    });

答案＃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;
  }
};

這樣自訂驗證器就可以從整個群組中抓取所需的資料，而不需要逐一驗證各個控制項。