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

分享于2022年07月17日 angular angular-formly ngx-formly typescript 问答
【问题标题】:由于另一个模型的字段,如何隐藏 Formly 表单的字段(How to hide fields of Formly form, due another model's fields)
【发布时间】: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' ,这是我想做的。

我可以吗?

谢谢。


【解决方案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