ng-alain 使用 SF formReset 重置搜索表单时,级联组件 cascader 不生效,文字没被清空?
在使用 ng-alain
生成的列表模板中,上面是由动态表单组件 SF
构成。下面是由 ST
表格组件构成。
下面说说 ST
表格的上方的搜索表单组件SF
。
在使用过程中,SF
动态表单可以随意配置已有的小部件,大多小部件都很实用并且常用,但有个别小部分存在缺陷问题,如 cascader
级联组件。你可能会遇到以下的小问题:
当表单都存在数据时,进行重置操作,使用 SF
的(formReset)
方法,但出来的效果除了级联组件 cascader
内容没清空外,其他小部件都清空了原有的值。此时再调用 SF
的(formSubmit)
方法,发现原来 cascader
的值是空的,而组件所显示文字却没有被清空。
此时解决办法如下:在 (formReset)
方法中刷新 SF
的schema
来实现清空。
html 文件
<page-header [action]="phActionTpl" [breadcrumb]="breadcrumb">
</page-header>
<nz-card>
<sf #sf mode="search" [schema]="searchSchema" [ui]="uiSchema" [button]="sfButton" (formSubmit)="search($event)" (formReset)="reset($event)"></sf>
<st #st [data]="url" [columns]="columns"></st>
</nz-card>
ts 文件
/**
* 搜索
* @param event 搜索表单数据对象
*/
search(event) {console.log(event)
this.st.load(undefined, event)
}
/**
* 搜索重置
* @param event 搜索表单数据对象
*/
reset(event) {this.st.reset(event);
// 针对级联组件 cascader 不能清空的问题,重新 refresh 一次表单
this.sf.refreshSchema();}