I am working with a custom radio components and I'm having a hard time connecting the component to the form using formly v5.
This is how I would use the custom radio component
<custom-radio
name="regular"
value="1"
label="Regular"
>
</custom-radio>
The above code renders the following HTML, which I am oversimplifying
<custom-radio>
<label>
<input type="radio">
<span class="faux-radio">
Regular
</span>
</label>
</custom-radio>
My formly configuration is the following
Formly Module
FormlyModule.forRoot({
types: [
{
name: "custom-radio",
component: FormlyCustomRadio, // This is my new formly wrapper component
}
],
}),
Component
@Component({
selector: 'formly-custom-radio',
template: `
<custom-radio
*ngFor="let option of to.options"
[formControl]="formControl"
[formlyAttributes]="field"
[name]="to.name"
[value]="option.key"
[label]="option.label"
>
</custom-radio>
`
})
export class FormlyCustomRadio extends FieldType<FieldTypeConfig> {}
FormlyFieldConfig data
const fields: FormlyFieldConfig[] = [
{
key: "dog",
type: "custom-radio",
templateOptions: {
label: "Do you have a dog?",
name: "dog",
options: [
{ key: "1", label: "Yes" },
{ key: "2", label: "No" },
],
},
},
]
The form renders properly but there is a error in the console and the form model does not contain the value selected in the form's radio button
Error: No value accessor for form control with unspecified name attribute
My spider sense is telling me that is has to do with formControl
and the inability to find an input within custom-radio
component as it hides the input from fromly
I'd like to not go the native path to solve this, since I'd have to rewrite the component's styles, inputs, and events.