javascript - angular validate that a pair of form fields are empty or both are filled - Stack Overflow

admin管理员组

文章数量:1022980

I have created a student form that has 4 to 5 fields. For the contact number, I have 2 fields, country code and phone number. I want to throw an error if the user only inputs one of the two fields ie country code is entered but the phone number isn't or vice-versa. However, if both fields are left empty, then it's valid as both are non-mandatory fields. I don't know how I can achieve this. Please help. Thanks in advance.

Here is my template:

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

My Form group:

this.addForm = this.formBuilder.group({

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

I have created a student form that has 4 to 5 fields. For the contact number, I have 2 fields, country code and phone number. I want to throw an error if the user only inputs one of the two fields ie country code is entered but the phone number isn't or vice-versa. However, if both fields are left empty, then it's valid as both are non-mandatory fields. I don't know how I can achieve this. Please help. Thanks in advance.

Here is my template:

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

My Form group:

this.addForm = this.formBuilder.group({

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

• javascript
• angular
• typescript
• validation

Share Improve this question Follow edited Aug 22, 2019 at 12:07 Taimoor Suleman 1,6261717 silver badges3030 bronze badges asked Aug 22, 2019 at 11:42 rock11rock11 75855 gold badges1919 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can create a custom validator which you place on the FormGroup as a whole rather than the individual controls. Your call to FormBuilder bees:

this.addForm = this.formBuilder.group({

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

And you create a Validator (either in the same file or elsewhere and export):

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

That way the custom Validator grabs what it needs from the whole group as opposed to needing to validate controls individually.

I have created a student form that has 4 to 5 fields. For the contact number, I have 2 fields, country code and phone number. I want to throw an error if the user only inputs one of the two fields ie country code is entered but the phone number isn't or vice-versa. However, if both fields are left empty, then it's valid as both are non-mandatory fields. I don't know how I can achieve this. Please help. Thanks in advance.

Here is my template:

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

My Form group:

this.addForm = this.formBuilder.group({

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

I have created a student form that has 4 to 5 fields. For the contact number, I have 2 fields, country code and phone number. I want to throw an error if the user only inputs one of the two fields ie country code is entered but the phone number isn't or vice-versa. However, if both fields are left empty, then it's valid as both are non-mandatory fields. I don't know how I can achieve this. Please help. Thanks in advance.

Here is my template:

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

My Form group:

this.addForm = this.formBuilder.group({

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

• javascript
• angular
• typescript
• validation

Share Improve this question Follow edited Aug 22, 2019 at 12:07 Taimoor Suleman 1,6261717 silver badges3030 bronze badges asked Aug 22, 2019 at 11:42 rock11rock11 75855 gold badges1919 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can create a custom validator which you place on the FormGroup as a whole rather than the individual controls. Your call to FormBuilder bees:

this.addForm = this.formBuilder.group({

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

And you create a Validator (either in the same file or elsewhere and export):

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

That way the custom Validator grabs what it needs from the whole group as opposed to needing to validate controls individually.

本文标签： javascriptangular validate that a pair of form fields are empty or both are filledStack Overflow