CODEWITHSUNDEEP
angular
user13111402
user13111402

Reputation: 23

Angular Reactive validate even if radio button is not selected

My form validates even if my radio button is not selected. I set initially to null and dont select any radio button but still form is valid

this.myForm = this.fb.group({
  enter: [null, [Validators.required]]
});

this.myForm.valueChanges.subscribe(i => {
  // i get form as valid
});
<form [formGroup]="myForm">
  <div role="group" aria-labelledby="aria-group-legend" class="left-pad-25">
    <input formControlName="enter" type="radio" [value]="true" tabindex="0"
      (change)="enterChange(true)" kendoRadioButton />
    <label for="rd1"> Yes </label>
    <input formControlName="enter" type="radio" [value]="false" tabindex="0"
      (change)="enterChange(false)" kendoRadioButton />
    <label for="rd2"> No </label>
    <span class="error-text" *ngIf="myForm.get('enter').errors
      && myForm.get('enter').touched || myForm.get('enter').dirty">
    <span class="checkbox-message"
      *ngIf="myForm.get('enter').hasError('required')">Please
      select one of these options.</span>
    </span>
  </div>
</form>

Upvotes: 2

Views: 114

Answers (1)

satanTime
satanTime

Reputation: 13539

for this case you need Validators.requiredTrue

Upvotes: 2

Related Questions