Create Ngx-Formly Custom Template for Radio Type

How to create a custom radio template in ngx-formly ?

Had reviewed the Ngx-Formly Guide for Custom Templates on FormlyField

Though had successfully created a custom template for input but i can't seem to achieve it on radio

Currently, i had it implemented like this:

FormlyFieldRadio

@Component({
  selector: 'formly-field-radio', 
  template: `
    <input type="radio" 
           [formControl]="formControl" 
           [formlyAttributes]="field">
  `,
   styles: [``]
})
export class FormlyFieldRadio extends FieldType {}

LandingModule

@NgModule({
  declarations: [
     ...
     FormlyFieldInput,
     FormlyFieldRadio
  ],
  imports: [
     ...
     FormlyModule.forRoot({
        types: [
           { name: 'input', component: FormlyFieldInput },
           { name: 'radio', component: FormlyFieldRadio }
        ]
     })
  ]
})
export class AppLandingModule {}

FormlyField Data

const fields: FormlyFieldConfig[] = [
   ...,
   {
      key: 'gender',
      type: 'radio',
      templateOptions: {
        name: 'gender',
        options: [{ value: 'Male', key: 'M' }, { value: 'Female', key: 'F' }]
      }
  }
];

Any suggestions / solution is highly appreciated. Thank you.

Had an existing Stackblitz Demo in regards to this matter.



You can implement a custom radio template by filling-in your FormlyFieldRadio with its corresponding loop, assignments and data. Not just a simple input type element with the same format as of FormlyFieldInput

FormlyFieldRadio

@Component({
 selector: 'formly-field-radio',
 template: `
  <div *ngFor="let option of to.options">          
    <input type="radio" 
           [name]="to.name"
           [formControl]="formControl" 
           [formlyAttributes]="field"
           [value]="option.key">
    {{ option.value }}
  </div>
 `,
})
export class FormlyFieldRadio extends FieldType {}

It seems like the to, formControl and field are already a reserved variables inside the ngx-formly that you could utilized based on the ngx-formly library radio file which my solution was inspired to.