How to pass selected as formControl value in Reactive Form?

@Sweg wrote:

I am trying to add a <ion-radio-group> to a reactive form in my Ionic / Angular app.

Here is the Typescript:

ngOnInit() {
    this.form = new FormGroup({
      userType: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      }),
}

And here is the HTML:

<form [formGroup]="form">
    <ion-radio-group>
        <ion-row>
                <ion-col size-sm="3" offset-sm="3">
                    <ion-label>User Type:</ion-label>
                </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size-sm="3" offset-sm="3">
                <ion-item lines="none">
                    <ion-label>Customer</ion-label>
                    <ion-radio value="customer"></ion-radio>
                </ion-item>
            </ion-col>
            <ion-col size-sm="3">
                <ion-item lines="none">
                    <ion-label>Mechanic</ion-label>
                    <ion-radio value="mechanic"></ion-radio>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-radio-group>
    <ion-button color="primary" (click)="onSubmit()">Submit</ion-button>
</form>

When I click the Submit button, the below code is ran, & “form invalid” is logged.

onSubmit() {
    if (this.form.invalid) {
      console.log('form invalid');
      return;
    }

Can someone please tell me what changes are required so that I can pass the value of the selected <ion-radio> as userType as part of this form?

Posts: 1

Participants: 1

Read full topic