如何使用formly在没有formControl的情况下创建自定义模板？

问题描述

有人知道如何使用 ngx-formly 在没有 formControl 的情况下创建简单的自定义模板的更好方法吗？

您可以在 example 中看到的一种方法。

我在这个例子中实现了：

• 使用自定义组件创建自定义类型；
• 配置字段；
• 隐藏提交按钮（模板中不需要）。

1. app.module.ts

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';
import { CustomComponent } from './custom.component';

@NgModule({
  imports: [
    browserModule,ReactiveFormsModule,FormlyBootstrapModule,FormlyModule.forRoot({
      types: [
        { name: 'custom',component: CustomComponent }
      ]
    }),],bootstrap: [AppComponent],declarations: [
    AppComponent,CustomComponent
  ],})
export class AppModule {} 

2. app.component

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

@Component({
  selector: 'formly-app-example',template: '<form [formGroup]="form" (ngSubmit)="submit()">
             <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
             <button *ngIf="fields[0].type !== 'custom'" type="submit" class="btn btn-primary submit-button">Submit</button>
             </form>',})

export class AppComponent {
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};

  fields: FormlyFieldConfig[] = [
    {
      type: 'custom',templateOptions: {
        label: 'Title',description: 'Custom description',}
    }
  ];

  submit() {
    if (this.form.valid) {
      alert(JSON.stringify(this.model));
    }
  }
}

3. custom.component.ts

import { FieldType } from '@ngx-formly/core';

@Component({
  selector: 'custom',template: '<p>{{to.label}}</p>
    <p>{{to.description}}</p>'
})
export class CustomComponent extends FieldType {}

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）