diff --git a/projects/design-angular-kit/src/lib/radio/radio.component.ts b/projects/design-angular-kit/src/lib/radio/radio.component.ts index 51fd250e..3b145707 100644 --- 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 index 35022c3e..0499dd96 100644 --- a/src/app/radio/radio-example/radio-example.component.html +++ b/src/app/radio/radio-example/radio-example.component.html @@ -16,3 +16,22 @@

Risultato

+ + + +
+

Radio in Reactive Form

+

Qual รจ il tuo sesso?

+
+ + + + + + +
+ +
Sesso selezionato: {{genderFormGroup.value.gender}}
+ + +
diff --git a/src/app/radio/radio-example/radio-example.component.ts b/src/app/radio/radio-example/radio-example.component.ts index 9c7db190..2e9e9f36 100644 --- 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 index 0ad129bf..f3370026 100644 --- 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,