Radio button validation not working on form submission

Question

I have a form that has a radio button that i am trying to validate on. However this is not working and I can navigate to the next page without selecting a radio button option. I am also validating my email address field but that works fine. Here is my code

TS

  createSetupForm() {
    this.isFormSetup = true;
    this.setupForm = new FormGroup({
      clientEmail: new FormControl("", {
        validators: [Validators.required, this.validateEmail()],
        updateOn: "blur",
      }),
      reduceoptionRadio: new FormControl("", {
        validators: [Validators.required],
        updateOn: "blur",
      }),
    });
  }

  markAllAsDirty() {
    for (const key in this.setupForm.controls) {
      if (key) {
        this.setupForm.controls[key].markAsDirty();
      }
    }
    this.doValidation();
  }

  doValidation() {
    if (!this.setupForm) {
      return;
    } // Return if no form
    // for each field in formErrors check if associated control have errors and update formErrors with those.
    for (const field in this.formStatus.formErrors) {
      // clear previous error message (if any)
      this.formStatus.formErrors[field] = "";
      const control = this.setupForm.get(field);
      // Only set errors on controls that exist, is dirty and not valid.
      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        // tslint:disable-next-line:forin
        for (const key in control.errors) {
          this.formStatus.formErrors[field] += messages[key] + " ";
        }
      }
    }
  }

  validateEmail() {
    return (control: AbstractControl) => {
      const validEmailAddressChar = CommonValidators.validEmailAddressChar(control);
      if (validEmailAddressChar !== null) {
        return validEmailAddressChar;
      }
      const isValidEmailAddress = CommonValidators.isValidEmailAddress(control);
      if (isValidEmailAddress !== null) {
        return isValidEmailAddress;
      }
    };
  }

  onNext(formModel, e?) {
    if (e.button === 2) {
      e.stopPropagation();
    } else if (e) {
      e.target.focus();
      this.formStatus.submitClicked = true; // this allow for validation error styling to be applied.
      this.markAllAsDirty();
      if (this.setupForm.valid) {
        this.avafService.resetError();
        //asign form values to loan adjustment model
        this.loanAdjustmentDetailsFormData.clientEmail = formModel.value.clientEmail;
        this.loanAdjustmentDetailsFormData.reduceoptionRadio = formModel.value.reduceoptionRadio;
        this.avafService.setAvafFormData(this.loanAdjustmentDetailsFormData);
        this.avafService.emitChange("goToStep2");
      }
      return false;
    }
  }

HTML

  <cb-form [formGroup]="setupForm">

        <label class="radio-button" *ngFor="let item of loanAdjustmentResult">
          <input formControlName="reduceoptionRadio" type="radio" name="reduceoptionRadio" [value]='item.restructureType'/>
          <span *ngIf="item.restructureType=='balloon'" class="radio-name"> {{'accountInfo.label.balloonPaymentTo'|translate}} </span>
        </label>

        <form-input  [formStatus]="formStatus" [parentFormGroup]="setupForm" [data]="{
          formControlName: 'clientEmail',
          name: 'clientEmail',
          label: 'accountInfo.label.emailAddressConfirmationLetter'|translate,
          placeholder: 'common.label.emptySpace' | translate,
          maxlength: '70'
        }">
        </form-input>

        <div fxLayout="column" class="custom-btn-group button-small-containers">
          <form-button type="button" [data]="{ type: 'primary', size: 'stretch' }" (mousedown)="onNext(setupForm, $event)">
              {{'common.label.next'|translate}}
          </form-button>
        </div>

  </cb-form>

Any ideas how I can validate the radio button?

Answer 1

I think the problem is here

this.setupForm.patchValue(this.loanAdjustmentDetailsFormData);
loanAdjustmentDetailsFormData = { reduceoptionRadio: false };

You pass boolean but radio button value is string

https://stackblitz.com/edit/angular-9-starter-mrkh1m?file=src/app/app.component.html

Answer 2

The Required-Validator does not work with radio buttons. In this case you have to do it on your own like this:

TS

let radioButtonClicked = false;

onRadioButtonClick(): void {
    this.radioButtonClicked = true;
}

onNext(formModel, e?) {
  // ...

  this.markAllAsDirty();
  if (this.setupForm.valid && this.radioButtonClicked) {
    this.avafService.resetError();

  // ...
}

HTML

    <label class="radio-button" *ngFor="let item of loanAdjustmentResult">
        <input formControlName="reduceoptionRadio" 
         type="radio" name="reduceoptionRadio" 
         [value]='item.restructureType'
         (change)="onRadioButtonClick()"/>
             <span *ngIf="item.restructureType=='balloon'" class="radio-name"> {{'accountInfo.label.balloonPaymentTo'|translate}} </span>
    </label>