Javascript NGX-FORMLY动态形式的hideExpression

我正试图在ngx formly中构建一个动态表单，但在保持关注点分离的同时使其正常工作存在问题。这在很大程度上是可行的，但问题是在模型中传递，当表单从api中预填充时，隐藏表达式不会得到更新的模型

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',
          description: '',
          required: true,
          options: [
            { value: 1, label: 'Minutes'  },
            { value: 2, label: 'Plants per hour'  },
            { value: 3, label: 'Crates per hour'  }
          ],
        },
      },
      {
        key: 'kpi_time',
        type: 'input',
        hideExpression: () => {
          console.warn('hideExpression', this.model);
          return (this.model['kpi_type'] !== 1);
        },
        templateOptions: {
          type: 'number',
          label: 'Minutes',
          placeholder: '',
          description: '',
          required: true,
        },
      },
      ...

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（只是一个包装器） ... 公共补丁模型（键、值）{ 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>