为无线电类型创建 Ngx-Formly 自定义模板

Question

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 {}

登陆模块

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

FormlyField 数据

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

非常感谢任何建议/解决方案。谢谢。

Answer 1

关于此事已有 Stackblitz Demo。

您可以通过在 FormlyFieldRadio 中填充相应的循环、分配和数据来实现自定义无线电模板。不仅仅是与 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.

Answer 2

我认为您在 @NgModule 中的声明中添加了不必要的内容。你应该可以接受这个：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ 
    BrowserModule,
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyBootstrapModule,
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

在你的组件中 Class:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'my-app',
  template: `
    <h3>@ngx-formly/bootstrap</h3>
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields">
        <button type="submit" class="btn btn-default">Submit</button>
      </formly-form>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    }, {
      key: 'gender',
      type: 'radio',
      templateOptions: {
        type: 'radio',
        label: 'Gender',
        required: true,
        name: 'gender',
        options: [{ value: 'Male', key: 'M' }, { value: 'Female', key: 'F' }]
      }
    }
  ];

  submit(user) {
    console.log(user);
  }
}

Here's a Working Sample StackBlitz for your ref.

注意：我正在使用 UI-Bootstrap 模块进行集成。

为无线电类型创建 Ngx-Formly 自定义模板

Create Ngx-Formly Custom Template for Radio Type

angular-formly

angular