How to Validate Radio Buttons Field in angular with reactive Forms

Question

I have name and values ,calling from the ts side and want to validate it.the values are'nt getting from the event and it's been comming such as (on) .

<form [formGroup]="reactiveForm">
  <div *ngFor="let item of checkBoxValueList">
    <input 
    type="radio" 
    formControlName="yourChoice"
    [value]="item"
    (change)="event($event)"
    >
    {{item}}
  </div>
 </form>
 <pre>
 {{reactiveForm.value | json}}
</pre>

   checkBoxValueList = [
    'Reading',
    'Watching',
    'Traveling',
    'Cooking'
  ];
  reactiveForm: FormGroup = new FormGroup({
    yourChoice: new FormControl()
  });

  constructor() {}

  edit(eve) {
    console.log(eve);
    console.log("target", eve.target.value);
  }

Answer 1

You can pass directly your value instead of event. Try it.

(change)="edit(item)".

Hope this helps.

Answer 2

I guess that you only need the selected value on change event and validate it. So here you can access the selected value of radio button by our reactiveForm variable.

event(eve) {
 console.log(eve);
 // console.log("target", eve.target.value);
 console.log(this.reactiveForm.value['yourChoice']); //this will give your selected value
}

Hope this helps!!