fix: force a name attribute on radio inputs (#1435)

Radio inputs now have a correctly filled name attribute.
When this attribute is not set and we bind
a [formGroup] on the input, angular considers that the radio button is global.
It is therefore
impossible to create several different groups of radio buttons on the page (changing one of the
buttons will erase the status of the others).
This fix prevents this unexpected behavior

---------

Co-authored-by: Silke <s.grueber@intershop.de>

src/app/shared/formly/types/radio-field/radio-field.component.html

@@ -3,6 +3,7 @@
   [formControl]="formControl"
   [value]="props.value"
   [id]="id"
+  [attr.name]="radioName"
   class="form-check-input"
   [ngClass]="props.inputClass"
   [attr.data-testing-id]="'radio-' + props.label"

src/app/shared/formly/types/radio-field/radio-field.component.spec.ts

@@ -25,11 +25,15 @@ describe('Radio Field Component', () => {
 
   beforeEach(() => {
     const testComponentInputs = {
-      model: { radio: '' },
+      model: { rkey: '' },
       fields: [
         {
-          key: 'radio',
+          key: 'rkey',
           type: 'radio',
+          props: {
+            label: 'radio-label',
+            value: 'value1',
+          },
         },
       ],
       form: new FormGroup({}),
@@ -50,5 +54,16 @@ describe('Radio Field Component', () => {
   it('should be rendered after creation', () => {
     fixture.detectChanges();
     expect(element.querySelector('ish-radio-field')).toBeTruthy();
+    expect(element.querySelector('ish-radio-field')).toMatchInlineSnapshot(`
+      <ish-radio-field
+        ><input
+          type="radio"
+          class="form-check-input"
+          value="value1"
+          id="formly_1_radio_rkey_0"
+          name="formly_0_formly-group__rkey"
+          data-testing-id="radio-radio-label"
+      /></ish-radio-field>
+    `);
   });
 });

src/app/shared/formly/types/radio-field/radio-field.component.ts

@@ -19,4 +19,8 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
   templateUrl: './radio-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RadioFieldComponent extends FieldType<FieldTypeConfig> {}
+export class RadioFieldComponent extends FieldType<FieldTypeConfig> {
+  get radioName() {
+    return `${this.field.parent?.id || ''}${this.field.key}`;
+  }
+}