为 Radio 类型创建 Ngx-Formly 自定义模板

Question

如何在 ngx-formly 中创建自定义电台模板？

看过Ngx-Formly Guide for Custom Templates on FormlyField

虽然已经成功地为 input 创建了一个自定义模板，但我似乎无法在 radio

上实现它

目前，我是这样实现的：

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

看来to, formControl and field 已经是保留的了 ngx-formly 中的变量，您可以根据我的解决方案受到启发的ngx-formly library radio file 使用这些变量。

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

在你的组件类中：

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);
  }
}

---

这里有一个Working Sample StackBlitz 供您参考。

---

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