如何使用 ngx-formly 实现动态自定义模板答案

【问题标题】：How to achieve dynamic custom template using ngx-formly如何使用 ngx-formly 实现动态自定义模板
【发布时间】：2018-11-18 11:08:33
【问题描述】：

我正在使用ngx-formly，并尝试引入一个自定义模板，仅供查看。当模板是静态的时，还可以，但是如果我尝试引入一些角度操作，它就不起作用了。见this demo。有什么建议吗？

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields">
        <button type="submit">Submit</button>
      </formly-form>
    </form>

    {{ model|json }}
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = {};
  name = "John";
  fields: FormlyFieldConfig[] = [
    {template: `<div>{{name}}</div>`}, // <-- I expected to see John, but I saw {{name}}
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Field 1',
        placeholder: 'Formly is terrific!',
      },
    },
  ];

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

【问题讨论】：

使用 ngx-formly 有什么特别的原因吗？
@AjayOjha，我已经使用 ngx-formly 编写了一些代码。

标签： angular angular-formly

【解决方案1】：

设置模块

@NgModule({
   imports: [ 
     BrowserModule,
     ReactiveFormsModule,
     FormlyModule.forRoot({
       types: [
        { name: 'customInput', component: FormlyFieldInput },
       ]
     }),
   ],
   declarations: [ AppComponent, FormlyFieldInput ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

设置自定义组件并监听keyup

@Component({
  selector: 'formly-field-input',
  template: `
     <div>{{this.model.profilePictureNotEditable}}</div>
     <input type="text" [formControl]="formControl"  [formlyAttributes]="field">`,
})
export class FormlyFieldInput extends FieldType implements OnInit {
    val;
    constructor() {
      super();
    }
    ngOnInit() {
      console.log(this.key);
      console.log(this.model)
    }

}

在 app.component 中正确设置表单

 @Component({
  selector: 'my-app',
  template: `
     <form [formGroup]="form" (ngSubmit)="submit(model)">
     <formly-form [model]="model" [fields]="fields">
      <button type="submit">Submit</button>
     </formly-form>
     </form>

    {{ model|json }}
    `,
 })
export class AppComponent {
  form = new FormGroup({});
  model = {profilePictureNotEditable: 'John'};

  fields: FormlyFieldConfig[] = [
  {
   fieldGroup: [
   {
    key: 'name',
    type: 'customInput',
    templateOptions: {
    label: 'Field 1',
    type: 'text',
    placeholder: 'Formly is terrific!',
  },
 }]
}];

 submit(model) {
   console.log(model);
   this.model.profilePictureNotEditable = 'this will be the profile picture!'
   }
 }

https://stackblitz.com/edit/ngx-formly-custom-template-ydrfss 希望对你有帮助！！

【讨论】：

感谢您的详细解决方案。自定义字段岩石。对于某些静态字段与某个特定字段相关的场景，这是一个很好的解决方案。但如果不是，它将被连接，例如当我更新用户时，我想在表单中显示照片（不可更新）。
ngx-formly 的强大功能！您可以使用模型来更新任何 customField !!stackblitz.com/edit/ngx-formly-custom-template-ydrfss
谢谢，但我认为this approach 更适合我的情况。 :)
你在 github 上搞砸的那个方法，是在做 model = { name: 'test' };这正是我建议您在自定义字段（字段数组中的项目 0）之上做的（在任何地方使用模型）。而这个stackblitz.com/edit/angular-hd17hb 有 2 个自定义字段，而不是一个.... 风格来呈现 2 个东西而不是一个，但基本上你需要按照我的建议使用该模型。祝你好运:)
我认为它们是不同的，您的方法必须绑定到输入，但该方法是独立的。

【解决方案2】：

我将问题发布到github并得到了正确答案，请查看this了解更多详情。

第一种方法，校验码here
- 不支持 obervable
第二种方法，校验码here
- 它支持 observable，但此时我必须将 ngx-formly 升级到 v5.beta。

【讨论】：

【解决方案3】：

{template: `<div>{{name}}</div>`}

应该是：

{template: `<div>${name}</div>`}

见template literals

【讨论】：