2
Answers

Radio Button in Angular 6 Nested Form not working

ajay pandey

ajay pandey
4y
2.4k
1
Hi ,
 
 
after click "Load Data" button "Beginner" radio button is not checked as it is already set in code.
 
even if we are clicking other radio button then value is not upading in below : "Form Values " data.
 
if we check other radio button then previous radio button not unchecked as it should checked.
 
see how it is coming in browser:
 
 
 
below is the code
 
  1. import { Component, OnInit } from '@angular/core';  
  2. import { FormGroup , FormControl, FormBuilder } from '@angular/forms';  
  3.   
  4. @Component({  
  5. selector: 'app-create-employee',  
  6. templateUrl: './create-employee.component.html',  
  7. styleUrls: ['./create-employee.component.css']  
  8. })  
  9. export class CreateEmployeeComponent implements OnInit {  
  10. employeeForm : FormGroup;  
  11. constructor(){}  
  12. ngOnInit(): void {  
  13. this.employeeForm = new FormGroup({  
  14. fullName: new FormControl(),  
  15. email : new FormControl(),  
  16. skills : new FormGroup({  
  17. skillName : new FormControl(),  
  18. experienceInYears: new FormControl(),  
  19. proficiency: new FormControl()  
  20. })  
  21. });  
  22. }  
  23. onLoadDataClick(): void {  
  24. this.employeeForm.setValue({  
  25. fullName: 'ajay',  
  26. email : '[email protected]',  
  27. skills:{  
  28. skillName:'.net',  
  29. experienceInYears : 5,  
  30. proficiency: 'beginner'  
  31. }  
  32. })  
  33. }  
  34. onSubmit(): void  
  35. {  
  36. console.log(this.employeeForm.value);  
  37. console.log(this.employeeForm.controls.fullName.touched);  
  38. console.log(this.employeeForm.get('fullName').value);  
  39. }  
  40. }
Create-employee.component.html
  1. <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()" class="form-horizontal" >  
  2. <div class="panel panel-primary">  
  3. <div class="panel-heading">  
  4. <h3 class="panel-title">Create Employee</h3>  
  5. </div>  
  6. <div class="panel-body">  
  7. <div class="form-group">  
  8. <label class="col-sm-2 control-label" for="fullName"> Full Name </label>  
  9. <div class="col-sm-8">  
  10. <input id="fullName" formControlName="fullName" type="text"class="form-control">  
  11. </div>  
  12. </div>  
  13. <div class="form-group">  
  14. <label class="col-sm-2 control-label" for="email"> Email </label>  
  15. <div class="col-sm-8">  
  16. <input id="email" formControlName="email" type="text"class="form-control">  
  17. </div>  
  18. </div>  
  19. <div formGroupName="skills">  
  20. <div class="form-group">  
  21. <label class="col-sm-2 control-label" for="skillName" >Skill </label>  
  22. <div class="col-sm-4">  
  23. <input type="text" id="skillName" placeholder="Name" formControlName="skillName" >  
  24. </div>  
  25. <input type="text" placeholder="Experience in Years " formControlName="experienceInYears" >  
  26. </div>  
  27. </div>  
  28. </div>  
  29. <div class="form-group">  
  30. <label class="col-md-2 control-label">Proficiency</label>  
  31. <div class="col-md-8" >  
  32. <label class="radio-inline">  
  33. <input id="proficiency" type="radio" value="'beginner'" formControlName="proficiency"> Beginner  
  34. </label>  
  35. <label class="radio-inline">  
  36. <input id="proficiency" type="radio" value="Intermediate" formControlName="proficiency"> Intermediate  
  37. </label>  
  38. <label class="radio-inline">  
  39. <input id="proficiency" type="radio" value="advanced" formControlName="proficiency"> Advanced  
  40. </label>  
  41. </div>  
  42. </div>  
  43. <br>  
  44. <div class="panel-footer" >  
  45. <div class="btn-toolbar">  
  46. <button class="btn btn-primary" type="submit">Save</button>  
  47. <button class="btn btn-primary" type="button" (click)="onLoadDataClick()">Load Data</button>  
  48. </div>  
  49. </div>  
  50. </div>  
  51. </form>  
  52. <table border="1">  
  53. <tr>  
  54. <th>  
  55. formGroup  
  56. </th>  
  57. <th>  
  58. formControl (fullName)  
  59. </th>  
  60. </tr>  
  61. <tr>  
  62. <td style="padding: 10px" >  
  63. touched : {{employeeForm.touched}}  
  64. <br/>  
  65. dirty : {{employeeForm.dirty}}  
  66. <br/>  
  67. valid : {{employeeForm.valid}}  
  68. <br/>  
  69. Form Values : {{employeeForm.value | json}}  
  70. </td>  
  71. <td style="padding: 10px">  
  72. touched : {{employeeForm.get('fullName').touched}}  
  73. <br/>  
  74. dirty : {{employeeForm.get('fullName').dirty }}  
  75. <br/>  
  76. valid : {{employeeForm.get('fullName').valid }}  
  77. <br/>  
  78. Full Name Values : {{employeeForm.get('fullName').value }}  
  79. </td>  
  80. </tr>  
  81. </table>
Please suggest if you have any suggesstions,
Answers (2)
Next Recommended Forum