由于另一个模型的字段，如何隐藏 Formly 表单的字段答案

【问题标题】：How to hide fields of Formly form, due another model's fields由于另一个模型的字段，如何隐藏 Formly 表单的字段
【发布时间】：2022-06-16 11:30:14
【问题描述】：

我的应用中有 2 个 Formly 表单。

由于另一个表单中的字段值，我需要隐藏一个表单的字段。

Formly 文档提供了此选项 (https://formly.dev/examples/field-options/hide-fields)： hideExpression: '!model.name'

但我需要类似：hideExpression: '!anotherModel.name'

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

  fields: FormlyFieldConfig[] = [
    {
      key: 'iLikeTwix',
      type: 'checkbox',
      templateOptions: {
        label: 'I like twix',
      },
      hideExpression: '!model2.name',
    },
  ];
 form2 = new FormGroup({});
  model2: any = {};
  options2: FormlyFormOptions = {};

  fields2: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Name'
      },
    }
  ];
}

注意这行：hideExpression: '!model2.name'，这是我想做的。

我可以吗？

谢谢。

【问题讨论】：

我认为model 部分是静态的，但我在这里看不到您的问题。请生成minimal reproducible example 重现您的问题。

标签： angular typescript angular-formly ngx-formly

【解决方案1】：

当您使用此表单时，表单已绑定到 model <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>。所以 Formly 不知道其他模型

您可以使用 FormlyOptions 将隐藏表达式与其他变量绑定

 public options: FormlyFormOptions = {
    formState: {
      hideCheckbox: false
    }
  }

在 fieldConfig 中

fields: FormlyFieldConfig[] = [
    {
      key: 'iLikeTwix',
      type: 'checkbox',
      templateOptions: {
        label: 'I like twix',
      },
      hideExpression: '!formState.hideCheckbox',
    },
  ];

在 ts fille 中，您可以将 hideCheckbox 变量更改为您想要的任何内容，以及订阅输入更改，例如

fields2: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Name'
      },
     hooks: {
      onInit: field => {
        return field.formControl.valueChanges
          .pipe(tap((value) => this.options.formState.hideCheckbox = Boolean(value)));
      }
     }
    }
  ];

在这里查看https://stackblitz.com/edit/angular-znqbmj?file=src/app/app.component.ts

【讨论】：