What would be the radio equivalent of this ngModel text input form, using spring boot mvc and angula-CodePudding

I was taking a tutorial on making an employee CRUD model that uses spring boot and mysql server for the backend and angular for the front end. On the Create part it had this form-group (the gender part I was adding new fields).

    <div >
            <label>
                Gender </label>
            <input type="text"  id="gender" required [(ngModel)]="employee.gender" name="gender">
        </div>

And that would work when submitting it (ie. creating the employee). But I can't figure out how to turn it into a radio button and submit it (it just gets stuck on the create page). This is what I tried to make when following a radio button example.

<div >

            <label for [(ngModel)]="employee.gender">Gender:</label>
            <div>
                <input id="male" type="radio" value="male" name="gender" formControlName="gender">
                <label for="male">Male</label>
            </div>

            <div>
                <input id="female" type="radio" value="female" name="gender" formControlName="gender">
                <label for="female">Female</label>
            </div>
        </div>

My understanding could use more work, but I'm trying to learn. Any help is appreciated. Thanks

CodePudding user response：

You want to set obj employee prop gender with radio buttons.

You could group radio buttons and use (change) event to set the genders. I created this example a while back, it should fit your needs if you refactor this example and make onChange(event: any) to set the event.value to equal your employee.gender.

<mat-radio-group aria-label="Select an option" (change)="onChange($event)">
  <mat-radio-button value="1">Option 1 Male</mat-radio-button>
  <mat-radio-button value="2">Option 2 Female</mat-radio-button>
  <br>
  <br>
  Selected value: {{selectedValue | json}}, send to backend sex as: {{selectedSexObj | json}}
</mat-radio-group>

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  selectedSexObj = { male: false, female: false };
  selectedValue: any;
  onChange(event: any) {
    this.selectedValue = event.value;
    if (event.value == 1) {
      this.selectedSexObj = { male: true, female: false };
    } else {
      this.selectedSexObj = { male: false, female: true };
    }
  }
}

Here is a working example: https://stackblitz.com/edit/angular-qggcqg-qydurn?file=src/app/radio-overview-example.ts

CodePudding user response：

In Angular, there are two different approaches when it comes to working with Forms:

In case of Template-driven forms we make use of ngModel for data binding, whereas in case of Reactive forms we work with FormControls.

The 1st example shared in the question is using Template-driven approach, and the radio button equivalent code with two options to choose from, would be:

<div >
  <label>Gender:</label>
  <div>
    <input id="male" type="radio" value="male" name="gender" [(ngModel)]="employee.gender">
    <label for="male">Male</label>
  </div>

  <div>
    <input id="female" type="radio" value="female" name="gender" [(ngModel)]="employee.gender">
    <label for="female">Female</label>
  </div>
</div>

In case of Reactive forms approach, you can simply replace [(ngModel)]="employee.gender" with formControlName="gender" provided you have defined a FormControl named gender within your FormGroup.