I am building a form where the user can set payment options. There is a dropdown to choose which payment method will be used.
For every payment mehod there is a FormGroup with options for the selected method:
form: FormGroup = new FormGroup({
method: new FormControl('paypal', {
validators: [
Validators.required,
],
}),
paypal: new FormGroup({
email: new FormControl(null, {
validators: [
Validators.required,
Validators.pattern(EMAIL_PATTERN)
],
}),
}),
other: new FormGroup({
email: new FormControl(null, {
validators: [
Validators.required,
Validators.pattern(EMAIL_PATTERN)
],
}),
}),
});
The issue here is, that the form will only be valid if both FormGroups are valid.
But the form should be valid as soon as the FormGroup for the selected payment method is valid.