feat: Aggiunto supporto ed esempio in documentazione per radio button…

… in Reactive Form
italia · Nov 24, 2022 · 6196909 · 6196909
1 parent 8370e0e
commit 6196909
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/projects/design-angular-kit/src/lib/radio/radio.component.ts b/projects/design-angular-kit/src/lib/radio/radio.component.ts
@@ -153,7 +153,7 @@ export class RadioGroupDirective implements AfterContentInit, ControlValueAccess
   /** Aggiorna il radio button `selected` a seconda del suo _value. */
   private _updateSelectedRadioFromValue(): void {
     this._selected = null;
-    this._radios.forEach(radio => {
+    this._radios?.forEach(radio => {
       radio.checked = this.value === radio.value;
       if (radio.checked) {
         this._selected = radio;

diff --git a/src/app/radio/radio-example/radio-example.component.html b/src/app/radio/radio-example/radio-example.component.html
@@ -16,3 +16,22 @@ <h4 >Risultato</h4>
   </div>
 </div>
 
+
+
+
+<div class="bd-example">
+  <h4>Radio in Reactive Form</h4>
+  <p>Qual è il tuo sesso?</p>
+  <form [formGroup] ="genderFormGroup">
+    <it-radio-group formControlName="gender">
+      <it-radio-button value="MALE" label="Maschio"></it-radio-button>
+      <it-radio-button value="FEMALE" label="Femmina"></it-radio-button>
+      <it-radio-button value="OTHERS" label="Altro"></it-radio-button>
+      <it-radio-button value="UNDEFINED" label="Preferisco non dirlo"></it-radio-button>
+    </it-radio-group>
+  </form>
+
+  <div class="example-selected-value">Sesso selezionato: <strong>{{genderFormGroup.value.gender}}</strong></div>
+
+
+</div>
diff --git a/src/app/radio/radio-example/radio-example.component.ts b/src/app/radio/radio-example/radio-example.component.ts
@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'it-radio-example',
   templateUrl: './radio-example.component.html',
   styleUrls: ['./radio-example.component.scss']
 })
-export class RadioExampleComponent {
+export class RadioExampleComponent implements OnInit {
 
   colors = [
     'Rosso',
@@ -17,4 +18,14 @@ export class RadioExampleComponent {
 
   disabled = false;
 
+
+  genderFormGroup: FormGroup;
+
+  constructor(private _fb: FormBuilder){}
+
+  ngOnInit(): void {
+      this.genderFormGroup = this._fb.group({
+        gender: ['MALE']
+      });
+  }
 }
diff --git a/src/app/radio/radio.module.ts b/src/app/radio/radio.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { DesignAngularKitModule } from 'projects/design-angular-kit/src/public_api';
 
@@ -15,6 +15,7 @@ import { RadioCheckedExampleComponent } from './radio-checked-example/radio-chec
 @NgModule({
   imports: [
     CommonModule,
+    ReactiveFormsModule,
     FormsModule,
     DesignAngularKitModule,
     SharedModule,