I'm currently developing an edit form using ReactiveFormModule. My goal is to display data in the edit form with various input elements such as textboxes, dropdowns, radio buttons, and checkboxes. I've been successful in setting values for textboxes and dropdowns using the setValue method, but I'm facing challenges when it comes to setting value for a Radio group.
Typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, FormControlName } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable, EMPTY, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.css'],
})
export class AddComponent implements OnInit {
stateList : any;
cityList: any;
genderList: any;
hobbyList: any;
name: FormControl;
age: FormControl;
state : FormControl;
city: FormControl;
myform: FormGroup;
gender: FormControl;
hobby: FormControl;
file: FormControl;
email: FormControl;
confirmEmail: FormControl;
submitted = false;
constructor(private http: HttpClient) {
// Form controls initialization
this.name = new FormControl("", [Validators.required, Validators.email, Validators.minLength(6), Validators.pattern("")]);
this.age = new FormControl("27", [checkageValidator]);
this.state = new FormControl("");
this.city = new FormControl("", Validators.required);
this.gender = new FormControl("");
this.hobby = new FormControl("");
this.file = new FormControl("");
this.email = new FormControl("");
this.confirmEmail = new FormControl("", [compareEmail]);
// FormGroup creation
this.myform = new FormGroup({
name: this.name,
age: this.age,
state : this.state,
city: this.city,
gender: this.gender,
hobby: this.hobby,
file: this.file,
email: this.email,
Cemail: this.confirmEmail
});
// Data initialization
this.stateList = [{value : 1, text: "Gujarat"}, {value : 2, text : "Maharastra"}];
this.cityList = [{ value: 1, text: "Ahmedabad", stateid: 1 }, { value: 2, text: "Rajkot", stateid: 1 }, { value: 3, text: "Gandhinagar", stateid: 2 }];
this.genderList = [{ value: 1, text: "Male", selected: "checked" }, { value: 2, text: "Female", selected: "" }];
this.hobbyList = [{ value: 1, text: "Games", checked:false }, { value: 2, text: "Tracking", checked:false }, { value: 3, text: "Swimming", checked:false }];
}
ngOnInit() {
// Setting initial values for certain fields
this.myform.controls["name"].setValue("Hardik");
this.myform.controls["state"].setValue("1");
// Setting default selection for Radio button
this.genderList.find(i=>i.value == 2).selected == "checked";
}
}
HTML
<form novalidate [formGroup]="myform" (ngSubmit)="SubmitData(myform)">
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
Name:
...
<p>The challenge lies in setting the value for my RadioButton using <code>setValue. Currently, I am adjusting the selected property within my JsonData, which may not be the best approach according to best practices. What alternative approaches could I consider?