ng-alain 使用SF formReset重置搜索表单时,级联组件cascader不生效,文字没被清空?
在使用ng-alain
生成的列表模板中,上面是由动态表单组件SF
构成。下面是由ST
表格组件构成。
下面说说ST
表格的上方的搜索表单组件SF
。javascript
在使用过程当中,SF
动态表单能够随意配置已有的小部件,大多小部件都很实用而且经常使用,但有个别小部分存在缺陷问题,如cascader
级联组件。你可能会遇到如下的小问题:html
当表单都存在数据时,进行重置操做,使用SF
的(formReset)
方法,但出来的效果除了级联组件cascader
内容没清空外,其余小部件都清空了原有的值。此时再调用SF
的(formSubmit)
方法,发现原来cascader
的值是空的,而组件所显示文字却没有被清空。java
此时解决办法以下:在(formReset)
方法中刷新SF
的schema
来实现清空。ui
html文件this
<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文件url
/** * 搜索 * @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(); }