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 library radio file使用ngx形式的变量，这是我的解决方案所启发的。

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模块进行集成。

为单选类型创建Ngx形式的自定义模板

2 个答案: