NGX-FORMLY动态形式的hideExpression

问题描述

我正在尝试在ngx中正式构建动态表单，但是在保持关注点分离的同时却无法正常工作。这通常可以正常工作，但是问题正在模型中传递，当从api中预先填充表单时，hide表达式无法获得更新的模型

formFactory.ts

import { Injectable } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { of } from 'rxjs';

@Injectable()
export class TaskFormFactory {
  private model: any = {};
  fields: FormlyFieldConfig[];
  form = new FormGroup({});

  constructor() {}

  get formModel() {
    return this.model;
  }

  public formFields() {
    return [
      {
        key: 'name',type: 'input',templateOptions: {
          label: 'Task name',placeholder: 'Task name',description: '',required: true
        },},{
        key: 'kpi_type',type: 'select',templateOptions: {
          label: 'Time allowance',placeholder: 'Time allowance',required: true,options: [
            { value: 1,label: 'Minutes'  },{ value: 2,label: 'Plants per hour'  },{ value: 3,label: 'Crates per hour'  }
          ],{
        key: 'kpi_time',hideExpression: () => {
          console.warn('hideExpression',this.model);
          return (this.model['kpi_type'] !== 1);
        },templateOptions: {
          type: 'number',label: 'Minutes',placeholder: '',...

MyComponent.ts

  @ViewChild(FormMasterComponent,{ static: false }) formComponent: FormMasterComponent;

  constructor(
    private activatedRoute: ActivatedRoute,private loadingStateService: LoadingStateService,private apiService: ApiService,private formFactory: TaskFormFactory
  ) {
    this.model = this.formFactory.formModel;
    this.fields = this.formFactory.formFields();
  }

  ngAfterViewInit() {
    if(!this.isCreateMode) {
      this.loadData(this.uuid);
    } 
  }
  // if loadData happens then the hideexpression breaks
  loadData(uuid?) {
    const serviceCfg = this.serviceConfig;

    this.loadingStateService.setLoadingState(LoadingState.Loading);

    this.apiService.services(serviceCfg).subscribe((res) => {

      if (typeof res['content'] !== 'undefined') {
        this.model = res['content'].filter(o => {
          return o.uuid === this.uuid;
        })[0];

        this.formComponent.patchModel('kpi_type',this.model['kpi_type']);
      }

      this.loadingStateService.setLoadingState(LoadingState.Loaded);
    });
  }

formmaster.component（只是一个包装器） ... 公共patchModel（键，值）{ this.form.get（key）.patchValue（value）; } ...

  <form [formGroup]="form" (ngSubmit)="onSubmit(model)">

    <formly-form
      [form]="form"
      [fields]="fields"
      [model]="model"
      (modelChange)="onModelChange($event)"
    >
    </formly-form>

    <div class="form-actions">
      <button
      mat-flat-button
      type="button"
      color="warn"
      [disabled]="loading"
      class="discard-button"
      (click)="onCancelClick()">
      discard
    </button>
    <ng-container *ngIf="unsavedChanges">
      <span class="unsaved-changes-message">
        <mat-icon>sync_problem</mat-icon>
        <small>Unsaved Changes.</small>
      </span>
    </ng-container>

    <button
      type="submit"
      class="btn btn-default"
      type="submit"
      mat-flat-button
      color="primary"
      [disabled]="canSave"
    >
      Submit
    </button>
    </div>

  </form>

</div>

0 个答案:

没有答案

解决方法

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

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

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