Создать пользовательский шаблон Ngx-Formly для типа радио - PullRequest
Новая
       5

Создать пользовательский шаблон Ngx-Formly для типа радио

0 голосов
/ 12 декабря 2018

Как создать пользовательский шаблон радиосвязи в ngx-formly?

Рассматривал ли руководство Ngx-Formly для пользовательских шаблонов в FormlyField

Хотя я успешно создал собственный шаблон для input , но я не могу добиться этого на radio

В настоящее время я реализовал его следующим образом:

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 

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

Любые предложения / решения высоко ценятся.Спасибо.

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Я думаю, что вы добавили ненужные вещи в объявления в вашем @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);
  }
}

Вот Рабочий пример StackBlitz для вашей ссылки.

Примечание: Я использую UI-Bootstrap Module для интеграции.

0 голосов
/ 12 декабря 2018

Имеет 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 , к которому вдохновило мое решение.

...