在Angular Formly中,HideExpression用于根据条件隐藏或显示表单字段。如果在页面加载时HideExpression不起作用,可能是因为表单字段的初始化过程中,HideExpression尚未被计算。
以下是解决方法的示例代码:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-your-component',
template: `
`,
})
export class YourComponent {
form: FormGroup;
fields: FormlyFieldConfig[];
model: any;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({});
this.fields = [
{
key: 'field1',
type: 'input',
templateOptions: {
label: 'Field 1',
hideExpression: 'model.field2 === "hiddenValue"',
},
},
{
key: 'field2',
type: 'select',
templateOptions: {
label: 'Field 2',
options: [
{ label: 'Visible', value: 'visibleValue' },
{ label: 'Hidden', value: 'hiddenValue' },
],
},
},
];
this.model = {};
}
}
使用ngIf指令可以确保在HideExpression计算之后再决定是否显示字段。
这些示例代码演示了如何在Angular Formly中解决在页面加载时HideExpression不起作用的问题。根据你的具体需求,你可能需要适当调整示例代码。