编辑表格表单
• 通过接口 editable 用于告知组件是否支持编辑态（在 dynamic-grid 中使用单元格的逻辑不一样），详细参考 TiDynamicGridModel.editable
• 当editable为 true 时，默认所选行的列都支持编辑。如果关闭某一列的编辑能力，需要手动配置对应列 col.editable 为 false。
• 使用 actionEvents 来配置触发编辑的时机。新增 ActionEventsType.editAction 支持业务通知组件更新行编辑状态
• TiGridKitEditEvents.EDITING：当前选中行正在编辑中
• TiGridKitEditEvents.CONFIRM_EDIT：当前选中行确认编辑(会对编辑结果进行校验，如果校验不通过，聚焦到第一个校验失败的表单项上)
• TiGridKitEditEvents.CANCEL_EDIT：取消编辑，回退编辑结果
• 当开启编辑态时，dynamic-grid 的 valueMode 只支持TiGridValueMode.ALLROWS。
dynamic-
form-grid-editable.html文件：
<ti-tabs class="dynamic-
form-grid-editable-container">
<ti-tab [id]="tabs[0].id" [header]="tabs[0].title" [(active)]="tabs[0].active" (activeChange)="onActiveChange($event, 0)">
<!-- 整体使用方式 -->
<ti-dynamic-
form
*ngIf="tabs[0].
formGroup"
[model]="tabs[0].
formModel"
[group]="tabs[0].
formGroup"
(customEvent)="onCustomEvent($event)"
>
<ng-template modelId="grid-with-batch-edit-global" as="dynamicGridHeaderTemplate">
<ti-header-operators [items]="operationItems" [selectedRows]="selectedRows"></ti-header-operators>
</ng-template>
</ti-dynamic-
form>
<span style="display
: inline-block; margin
: 24px 0 0 24px" [tiTip]="model.btnDisabled ? model.editingTip
: ''">
<button tiButton (click)="getCurrent
FormValue()" [disabled]="model.btnDisabled">获取表单值</button>
</span>
<demo-log [logs]="logs"></demo-log>
</ti-tab>
<ti-tab [id]="tabs[1].id" [header]="tabs[1].title" [(active)]="tabs[1].active" (activeChange)="onActiveChange($event,1)">
<ti-container *ngIf="tabs[1].active">
<ti-
formfield labelWidth="160px">
<ti-item>
<ti-header-operators class="mb-3" [items]="operationItems1" [selectedRows]="selectedRows1"></ti-header-operators>
<!-- 单独使用方式 -->
<ti-dynamic-grid
*ngIf="tabs[1].
formGroup"
[model]="tabs[1].
formModel"
[group]="tabs[1].
formGroup"
(gridRowSelected)="onGridRowSelected($event)"
>
</ti-dynamic-grid>
</ti-item>
</ti-
formfield>
</ti-container>
<span style="display
: inline-block; margin
: 24px 0 0 24px" [tiTip]="model.btnDisabled ? model.editingTip
: ''">
<button tiButton (click)="getCurrent
FormValue()" [disabled]="model.btnDisabled">获取表单值</button>
</span>
<demo-log [logs]="logs"></demo-log>
</ti-tab>
</ti-tabs>
Dynamic
FormGr
idEditableComponent.ts文件
import { Component, Injector } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { TiHeaderOperatorsItem, GridPipeRenderTemplate, ICellRendererParams } from '@cloud/tinycloud';
import {
TiDynamicGridModel,
TiDynamic
FormCheckService,
TiDynamic
FormModel,
TiDynamic
InputModel,
TiDynamicSelectModel,
TiDynamic
FormControlModel,
TiGridKitEditEvents,
TI_GRID_KIT_ROW_ACTION_TYPE,
TiDynamic
FormGroupModel,
MATCH_HIDDEN,
MATCH_VALIDATOR_ADD,
MATCH_DISABLED
} from '@cloud/ti-dynamic-
form';
import { TiValidators } from '@cloud/tiny3';
import { Dynamic
FormGr
idEditableModel } from './Dynamic
FormGr
idEditableModel';
import { Dynamic
FormBase
ForComponent } from '../base-component/Dynamic
FormBase
ForComponent';
@Component({
templateUrl
: './dynamic-
form-grid-editable.html',
// 整体使用场景直接调用TiDynamic
FormComponent示例的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
// 单独使用场景需要在使用组件的prov
ider上注入TiDynamic
FormCheckService
// 再调用service上的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
prov
iders
: [TiDynamic
FormCheckService, Dynamic
FormGr
idEditableModel],
styles
: [
`
.dynamic-
form-grid-editable-container {
background-color
: var(--ti-color-bg-container-secondary);
padding-bottom
: var(--ti-common-space-2x);
}
`
]
})
export class Dynamic
FormGr
idEditableComponent extends Dynamic
FormBase
ForComponent {
/**
* 批量选中的含数据
*/
selectedRows
: Array<any> = [];
/**
* 单独使用时批量选中的行数据
*/
selectedRows1
: Array<any> = [];
/**
* 操作按钮区域
*/
operationItems
: Array<TiHeaderOperatorsItem>;
/**
* 单独使用时批量选中的操作区
*/
operationItems1
: Array<TiHeaderOperatorsItem>;
constructor(protected injector
: Injector, public model
: Dynamic
FormGr
idEditableModel) {
super(injector);
this.operationItems = this.getBatchOperationItems();
this.operationItems1 = [...this.operationItems];
}
ngOnInit()
: void {
super.ngOnInit();
}
getModels
ForDynamic
Form()
: TiDynamic
FormModel {
const config
: any = this.getCommonConfig();
return [new TiDynamicGridModel({ ...config })];
}
getModels
ForSingleUse()
: TiDynamic
FormControlModel {
const config
: any = this.getCommonConfig(true);
return new TiDynamicGridModel({ ...config }) as TiDynamic
FormControlModel;
}
// 整体使用和单独使用时公用的配置项，业务时间开发过程中只使用其中一种模式
// isSingle：是否是单独使用模式，用于区分一些配置项，防止两种模式下相互影响
getCommonConfig(isSingle
: boolean = false)
: any {
const id
: string = isSingle ? 'grid-with-batch-edit-single'
: 'grid-with-batch-edit-global';
return {
id,
label
: '批量编辑表格',
// 动态表单开启编辑能力
supportEdit
: true,
gridKitOption
: {
enableColsResponsive
: true,
rowSelection
: 'multiple',
colDefs
: this.model.getColDefs(false),
srcData
: this.model.getGridData(1)
// displayMode
: 'ti-grid'
},
// 编辑态使用
groupFactory
: ()
: TiDynamic
FormModel => {
return [
new TiDynamic
InputModel({
id
: 'protocol',
value
: '容许',
validators
: {
required
: null
}
}),
new TiDynamicSelectModel({
id
: 'type',
value
: 'IPV4',
validators
: {
required
: null
},
options
: [
{ label
: 'IPV4', value
: 'IPV4' },
{ label
: 'IPV6', value
: 'IPV6' }
],
relations
: [
{
match
: MATCH_DISABLED,
when
: [{ id
: 'protocol', value
: '' }]
}
]
}),
// 协议端口
new TiDynamic
FormGroupModel({
id
: 'protocolPort',
group
: [
new TiDynamicSelectModel<
string>({
id
: 'protocol',
options
: [
{ value
: 'HTTP', label
: 'HTTP' },
{ value
: 'TCP', label
: 'TCP' }
],
defaultValueIndex
: 0
}),
new TiDynamic
InputModel({
id
: 'sessionTime',
placeholder
: '请输入保持会话时间',
descriptions
: 'HTTP保持会话时间区域是1-1440，TCP保持会话的时间是1-60',
// 根据表单值动态添加的校验器
dynamicValidators
: {
// 如果relation匹配成功，使用该校验规则
match
: {
rangeValue
: {
validator
: TiValidators.rangeValue(1, 1440)
}
},
// 如果relation匹配不成功，使用该校验规则
notMatch
: {
rangeValue
: {
validator
: TiValidators.rangeValue(1, 60)
}
}
},
// 校验规则，始终需要的校验规则
validators
: {
// 设置为null，会调用TiValidators.required进行校验；
required
: null
},
//
报错信息配置，可选项
errorMessages
: {
rangeValue
: '当前协议的会话时间范围是：{0} - {1}'
},
relations
: [
{
// 如果匹配成功，动态添加相关校验规则
match
: MATCH_VALIDATOR_ADD,
// 当是layer是L7的后端协议，启用相关校验规则
when
: [{ id
: 'protocol', value
: 'HTTP' }]
},
{
match
: MATCH_HIDDEN,
when
: [
{
value
: 'IPV4',
/**
* 13.0.180 版本新增，用在
formarray和dynamic-grid组件中和本行的
formGroup其他control建立关联关系
* 解决之前通过rootPath(id.index.id)中行新增删除时index未同步变化时（groupFactory只能在初始化时调用一次）引起的关联关系不正确的问题
*
* 注意：如果存在
formarray里面嵌套
formarry类，可能会存在查找到的行group不准确的场景
* 查找逻辑：当前control往上递归，如果其父元素是个
formArray，则认为该group为要找的行group
*/
currentRowPath
: 'type'
}
]
}
]
})
]
})
];
},
// 行数据限制
limit
: this.model.gridDataLimit$,
initialCount
: 5,
// 配置触发表格刷新和添加删除事件的流
: 组件内部会监听这个流去触发对应的行为。
actionEvents
: {
// 行操作流
rowAction
: this.model.rowAction$,
// 编辑态流
editAction
: this.model.editAction$,
// 刷新单元格流
refreshCells
: this.model.refreshCells$
}
};
}
getBatchOperationItems()
: Array<TiHeaderOperatorsItem> {
return [
{
label
: '迁移',
disabled
: (selectedRows
: Array<any>)
: boolean => !!this.model.editRows$.getValue().length || !selectedRows?.length,
getTip
: (selectedRows
: Array<any>)
: string =>
!selectedRows?.length ? '请至少选择一行'
: this.model.editRows$.getValue().length ? this.model.editingTip
: '',
click
: ()
: void => {
this.logs = [...this.logs, `迁移按钮被点击`];
}
},
{
label
: '修改策略',
disabled
: (selectedRows
: Array<any>)
: boolean => !selectedRows?.length,
h
ide: this.model.editRows$.pipe(map((value
: any[]) => !!value.length)),
getTip
: (selectedRows
: Array<any>)
: string => (!selectedRows?.length ? '请至少选择一行'
: ''),
click
: ($event
: any)
: void => {
this.model.editAction$.next({
// 当前修改的行数据
rowDatas
: $event.selectedRows,
// 进入修改态
actionType
: TiGridKitEditEvents.EDITING,
callback
: ({ editRows }
: any)
: void => {
this.model.editRows$.next(editRows);
this.model.getBtnDisabled(editRows);
}
});
}
},
{
label
: '保存修改',
h
ide: this.model.editRows$.pipe(map((value
: any[]) => !value.length)),
disabled
: (selectedRows
: Array<any>)
: any => this.model.getBatchDisabled(selectedRows),
click
: ($event
: any)
: void => {
this.model.editAction$.next({
// 当前修改的行数据
rowDatas
: $event.selectedRows,
// 确定修改
actionType
: TiGridKitEditEvents.CONFIRM_EDIT,
// 如果在保存时需要在校验通过后先向后台请求保存，可以使用该接口。根据其返回的布尔值决定后续是否进行前台保存且
// 变成非编辑态(true
: 进行后续；false或
报错：不进行后续，停留在编辑态)。
// 13.0.120 版本新增
serverS
ideSaveFn
: ({ editedRowDatas }
: any)
: Observable<boolean> => {
this.logs = [...this.logs, `编辑后的行数据集合
:${JSON.
stringify(editedRowDatas)}`];
return this.model.saveByMockApi(editedRowDatas);
},
callback
: ({ editRows }
: any)
: void => {
this.model.editRows$.next(editRows);
this.model.getBtnDisabled(editRows);
}
});
}
},
{
label
: '取消修改',
h
ide: this.model.editRows$.pipe(map((value
: any[]) => !value.length)),
disabled
: (selectedRows
: Array<any>)
: any => this.model.getBatchDisabled(selectedRows),
click
: ($event
: any)
: void => {
this.model.editAction$.next({
// 当前修改的行数据
rowDatas
: $event.selectedRows,
// 取消修改
actionType
: TiGridKitEditEvents.CANCEL_EDIT,
callback
: ({ editRows }
: any)
: void => {
this.model.editRows$.next(editRows);
this.model.getBtnDisabled(editRows);
}
});
}
},
{
label
: '添加',
click
: ()
: void => {
const i
: number = Math.floor(Math.random() * 10);
this.model.rowAction$.next({
action
: TI_GRID_KIT_ROW_ACTION_TYPE.ADD,
// 新增行位置
addIndex
: 0,
// 新增行为编辑态
isEdit
: true,
data
: {
name
: `名称-${i}`,
protocol
: `容许-${i}`,
type
: `${i % 2 ? 'IPV4'
: 'IPV6'}`,
protocolPort
: {
sessionTime
: '80',
protocol
: 'HTTP'
}
}
});
}
}
];
}
/**
* 用户自定义事件监听 获取当前待编辑rows
* @param customEventObj 自定义事件发射的数据
*/
onCustomEvent(customEventObj
: any)
: void {
if (customEventObj?.type === 'gridRowSelected') {
this.selectedRows = customEventObj.$event;
}
}
/**
* 单独使用时 获取当前待编辑rows
* @param 自定义事件发射的行数据
*/
onGridRowSelected($event
: Array<any>)
: void {
this.selectedRows1 = $event;
}
/**
* 用于DEMO演示，业务无需关注
*/
onActiveChange($event
: any, index
: number)
: void {
super.onActiveChange($event, index);
this.model.btnDisabled = false;
this.logs = [];
this.model.editRows$.next([]);
}
}
/**
* 自定义render组件
*/
@Component({
selector
: 'edit-component-render',
template
: `
<div #container tabindex="0" style="outline
: none !important;color
: red;" tiOverflow>
<span>{{ getValue() }}</span>
</div>
`,
host
: {
'[class.ti-render-container]'
: 'true'
}
})
export class customRenderer extends GridPipeRenderTemplate {
public params
: any;
public
input: string;
agInit(params
: ICellRendererParams)
: void {
super.agInit(params);
this.
input = this.params.value ?? '';
}
setValue(value
: string)
: void {
this.params.data[this.params.colDef.field] = value;
}
inputChange()
: void {
this.setValue(this.
input);
}
keydown(event
: any)
: void {
event.stopPropagation();
}
}
Dynamic
FormGr
idEditableModel.ts文件：
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject, of } from 'rxjs';
import { delay, map } from 'rxjs/operators';
import {
gridConstants,
TiGridKitColDef,
TiGridOperationEvent,
TiGridOperationOption,
TiOperationRendererParams,
TiRefreshScope,
TiRenderType
} from '@cloud/ti-grid-kit';
import {
TI_GRID_KIT_ROW_ACTION_TYPE,
TiDynamicGridLimit,
TiGridKitEditEventCondition,
TiGridKitEditEvents,
TiGridKitRowActionCondition
} from '@cloud/ti-dynamic-
form';
@Injectable()
export class Dynamic
FormGr
idEditableModel {
/**
* 表格行操作事件流。表格内部监听该事件流做相应的动作
*/
rowAction$
: Subject<TiGridKitRowActionCondition> = new Subject<TiGridKitRowActionCondition>();
/**
* 单元格刷新流
*/
refreshCells$
: Subject<TiRefreshScope> = new Subject<TiRefreshScope>();
/**
* 表格修改操作事件流。表格内部监听该事件处理表格修改。
*/
editAction$
: Subject<TiGridKitEditEventCondition> = new Subject<TiGridKitEditEventCondition>();
// 行数据限制
gridDataLimit$
: BehaviorSubject<TiDynamicGridLimit> = new BehaviorSubject<TiDynamicGridLimit>({ min
: 1 });
/**
* 获取表单值按钮是否禁用
*/
btnDisabled
: boolean = false;
/**
* 编辑中禁用提示
*/
editingTip
: string = '请先保存或取消选中行的批量修改操作';
/**
* 当前修改的行
*/
editRows$
: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
/**
* 删除按钮
*/
deleteBtn
: TiGridOperationOption = {
label
: '删除',
key
: 'op_delete',
actionCallback
: (obj
: TiGridOperationEvent) => {
this.rowAction$.next({
action
: TI_GRID_KIT_ROW_ACTION_TYPE.REMOVE,
// 推荐使用data传递删除数据，兼容之前的rowIndex逻辑
// rowIndex
: obj.rowIndex
data
: obj.data
});
}
};
/**
* 修改按钮
*/
editBtn
: TiGridOperationOption = {
label
: '修改策略',
key
: 'op-edit',
actionCallback
: (obj
: TiGridOperationEvent)
: void => {
this.editAction$.next({
// 当前修改的行数据
rowDatas
: [obj.data],
// 启动修改态
actionType
: TiGridKitEditEvents.EDITING,
callback
: ({ editRows }
: any)
: void => {
this.editRows$.next(editRows);
this.getBtnDisabled(editRows);
}
});
}
};
/**
* 确认修改
*/
confirmEditBtn
: TiGridOperationOption = {
label
: '保存',
key
: 'op-edit-cancel',
actionCallback
: (obj
: TiGridOperationEvent)
: void => {
this.editAction$.next({
// 当前修改的行数据
rowDatas
: [obj.data],
// 确定修改
actionType
: TiGridKitEditEvents.CONFIRM_EDIT,
// 如果在保存时需要在校验通过后先向后台请求保存，可以使用该接口。根据其返回的布尔值决定后续是否进行前台保存且
// 变成非编辑态(true
: 进行后续；false或
报错：不进行后续，停留在编辑态)。
// 13.0.120 版本新增
serverS
ideSaveFn
: ({ editedRowDatas }
: any)
: Observable<boolean> => {
return this.saveByMockApi(editedRowDatas);
},
callback
: ({ editRows }
: any)
: void => {
this.editRows$.next(editRows);
this.getBtnDisabled(editRows);
}
});
}
};
/**
* 取消修改
*/
cancelEditBtn
: TiGridOperationOption = {
label
: '取消',
key
: 'ti-grid-kit-op-edit-cancel',
actionCallback
: (obj
: TiGridOperationEvent)
: void => {
this.editAction$.next({
// 当前修改的行数据
rowDatas
: [obj.data],
// 取消修改
actionType
: TiGridKitEditEvents.CANCEL_EDIT,
callback
: ({ editRows }
: any)
: void => {
this.editRows$.next(editRows);
this.getBtnDisabled(editRows);
}
});
}
};
// 获取列配置
getColDefs(singleEdit
: boolean = true)
: TiGridKitColDef[] {
return [
{
headerName
: '名称',
field
: 'name',
// 可通过该字段关闭该列修改能力。
supportEdit
: false
},
{
headerName
: '策略',
field
: 'protocol',
cellRenderer
: TiRenderType.TextWithTipRenderer
},
{
headerName
: '类型',
field
: 'type'
},
{
headerName
: '后端协议',
field
: 'protocolPort',
valueGetter
: (params
: any)
: string => {
return params.data.protocolPort.protocol + '
: ' + (params.data.protocolPort.sessionTime || '80');
}
},
{
headerName
: '操作',
field
: gridConstants.OPERATION_FIELD,
cellRenderer
: TiRenderType.OperationRenderer,
cellRendererParams
: (params
: any)
: TiOperationRendererParams => {
const gridDataLimit
: TiDynamicGridLimit = this.gridDataLimit$.getValue()!;
const deleteBtn
: TiGridOperationOption = this.deleteBtn;
// 如果是单行修改，其他行的修改按钮就需要禁用
const hasEditRows
: boolean = !!this.editRows$.getValue().length;
const editDisabledTip
: string = hasEditRows ? '请先保存或者取消处于修改状态的行'
: '';
if (singleEdit) {
this.editBtn.disabled = hasEditRows;
this.editBtn.tipStr = editDisabledTip;
}
deleteBtn.disabled = hasEditRows;
deleteBtn.tipStr = editDisabledTip;
// 如果当前只有一行，删除按钮设置成禁用；
if (params.context.parentArray.length <= (gridDataLimit?.min || 0)) {
deleteBtn.disabled = true;
deleteBtn.tipStr = '只有一条记录，不能删除。';
}
return {
...params,
operationList
: params.data.isCurrentEdit ? [this.confirmEditBtn, this.cancelEditBtn]
: [this.editBtn, deleteBtn]
};
},
flex
: 1
}
];
}
getGridData(length
: number = 2)
: Array<any> {
const srcData
: Array<any> = [];
for (let i
: number = 0; i < length; i++) {
srcData.push({
name
: `名称-${i}`,
protocol
: `容许-${i}`,
type
: `${i % 2 ? 'IPV4'
: 'IPV6'}`,
protocolPort
: {
sessionTime
: '80',
protocol
: 'HTTP'
}
});
}
return srcData;
}
// 获取表单值按钮禁用逻辑
getBtnDisabled(editRows
: Array<any>)
: void {
this.btnDisabled = !!editRows.length;
}
// 批量确认修改按钮和批量取消修改按钮置灰逻辑
getBatchDisabled(selectRows
: Array<any> = [])
: boolean {
return !selectRows.length || !selectRows.
filter((row
: any) => row.isCurrentEdit).length;
}
// 模拟后台异步保存数据
// editedRowDatas 编辑后的行数据集合
saveByMockApi(editedRowDatas
: Array<any>)
: Observable<boolean> {
console.log('编辑后的行数据集合
:', editedRowDatas);
// return throwError('This is an error!'); // 测试
报错的场景
return of(editedRowDatas).pipe(
delay(800),
map(() => {
return true; // 后台保存成功
// return false; // 后台保存失败，跟上一行可切换测试
})
);
}
}
Dynamic
FormBaseComponent.ts文件
import { Component, Injector, ViewChild } from '@angular/core';
import {
FormGroup } from '@angular/
forms';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { take } from 'rxjs/operators';
import { TiDynamic
FormCheckService, TiDynamic
FormComponent } from '@cloud/ti-dynamic-
form';
/**
* 动态表单demo示例基类，统一添加值和校验能力
*/
@Component({
template
: ''
})
export class Dynamic
FormBaseComponent {
constructor(protected injector?
: Injector) {}
/**
* 动态表单引用。可用于表单校验等场景
*/
@ViewChild(TiDynamic
FormComponent) public dynamic
FormRef
: TiDynamic
FormComponent;
/**
* 日志打印记录，DEMO演示，业务无需关注
*/
logs
: Array<any> = [];
/**
* 根据校验流状态控制按钮禁用或者loading态，业务根据实际情况选用
*/
btnDisabled$
: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* 组件销毁流
*/
destory$
: Subject<void> = new Subject<void>();
checkAndGet
FormValue(
formGroup
: FormGroup, narrowSelector?
: string)
: void {
let checkResult
: boolean;
if (this.dynamic
FormRef && !narrowSelector) {
// 整体使用场景直接调用TiDynamic
FormComponent示例的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
checkResult = this.dynamic
FormRef.check
Form();
} else {
// 单独使用场景需要在使用组件的prov
ider上注入TiDynamic
FormCheckService
// 再调用service上的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
checkResult = !!this.injector?.get(TiDynamic
FormCheckService).check
Form(
formGroup, narrowSelector);
}
if (!checkResult) {
return;
}
this.logs = [...this.logs, `表单值：${JSON.
stringify(
formGroup.value)}`];
}
/**
* 异步校验能力
*/
checkAndGet
FormAsyncValue(
formGroup
: FormGroup, isSingle
: boolean = false)
: void {
// 按钮处于禁用态，不重复下发校验
if (this.btnDisabled$.getValue()) {
return;
}
this.btnDisabled$.next(true);
// 本案例核心配置项：check
FormAsync使用
let isValid$
: Observable<boolean>;
if (this.dynamic
FormRef && !isSingle) {
// 整体使用场景直接调用TiDynamic
FormComponent示例的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
isValid$ = this.dynamic
FormRef.check
FormAsync();
} else {
// 单独使用场景需要在使用组件的prov
ider上注入TiDynamic
FormCheckService
// 再调用service上的check
Form/check
FormAsync方法触发校验并聚焦到第一个错误表单项的行为
isValid$ = this.injector?.get(TiDynamic
FormCheckService)?.check
FormAsync(
formGroup)!;
}
isValid$
.pipe(
// 注意：点击获取校验属于高频操作，及时取消订阅或采用take(1)
take(1)
)
.subscribe((isValid
: boolean) => {
this.btnDisabled$.next(false);
if (isValid) {
this.logs = [...this.logs, `表单值：${JSON.
stringify(
formGroup.value)}`];
}
});
}
ngOnDestroy()
: void {
this.destory$.next();
}
}
Dynamic
FormTypeBaseComponent.ts文件
import { Component, Injector, OnInit } from '@angular/core';
import {
MATCH_DISABLED,
MATCH_HIDDEN,
TiDynamic
FormControlModel,
TiDynamic
FormControlSpaceType,
TiDynamic
FormGroupOption,
TiDynamic
FormModel,
TiDynamic
FormService,
TiDynamicSwitchModel
} from '@cloud/ti-dynamic-
form';
import { Dynamic
FormBaseComponent } from './Dynamic
FormBaseComponent';
import {
FormGroup } from '@angular/
forms';
export enum Dynamic
FormCommonId {
HIDDEN = 'common_hidden',
DISABLE = 'common_disable',
RESET = 'common_reset'
}
export interface Dynamic
FormDemoTab {
title
: string;
active?
: boolean;
formGroup
: FormGroup;
formModel
: TiDynamic
FormControlModel | TiDynamic
FormModel;
id
: string;
}
/**
* 动态表单demo示例基类，统一添加整体使用/单独使用两种demo呈现逻辑
*/
@Component({
template
: ''
})
export abstract class Dynamic
FormTypeBaseComponent extends Dynamic
FormBaseComponent implements OnInit {
formModel
ForDynamic
Form
: TiDynamic
FormModel;
formModel
ForSingleUse
: TiDynamic
FormControlModel;
formGroup
ForDynamic
Form
: FormGroup;
formGroup
ForSingleUse
: FormGroup;
dynamic
FormServ
: TiDynamic
FormService;
groupOption
: TiDynamic
FormGroupOption;
public tabs
: Array<Dynamic
FormDemoTab> = [];
// 是否需要开启测试表单的 “是否显示” 和 “是否禁用” 功能
public needCommonModel
: boolean = true;
// 是否是表单组
public is
FormGroup
: boolean = false;
constructor(protected injector
: Injector) {
super(injector);
this.dynamic
FormServ = injector.get(TiDynamic
FormService);
}
ngOnInit()
: void {
this.set
FormModel();
}
set
FormModel()
: void {
const isLocal
: boolean = !window.location.href.includes('cloud-design/design-develop/');
this.
formModel
ForDynamic
Form =
isLocal && this.needCommonModel ? [...this.getCommonModel(), ...this.getModels
ForDynamic
Form()]
: [this.get
FormModel()];
this.
formModel
ForSingleUse = this.getModels
ForSingleUse();
this.
formGroup
ForDynamic
Form = this.dynamic
FormServ!.create
FormGroup(this.
formModel
ForDynamic
Form);
this.
formGroup
ForSingleUse = this.dynamic
FormServ!.create
FormGroup([this.
formModel
ForSingleUse]);
this.tabs = [
{
title
: 'ti-dynamic-
form整体使用方式',
active
: true,
formModel
: this.
formModel
ForDynamic
Form,
formGroup
: this.
formGroup
ForDynamic
Form,
id
: 'use_with_dynamic_
form'
},
{
title
: '在模板中单独使用selector方式',
formModel
: this.
formModel
ForSingleUse,
formGroup
: this.
formGroup
ForSingleUse,
id
: 'use_with_selector'
}
];
}
getCommonModel()
: TiDynamic
FormModel {
return [
new TiDynamicSwitchModel({
id
: Dynamic
FormCommonId.HIDDEN,
label
: '是否显示',
value
: true
}),
new TiDynamicSwitchModel({
id
: Dynamic
FormCommonId.DISABLE,
label
: '是否禁用',
value
: false,
spaceType
: this.is
FormGroup ? TiDynamic
FormControlSpaceType.group
: TiDynamic
FormControlSpaceType.normal
})
];
}
getModels
ForDynamic
Form()
: TiDynamic
FormModel {
let
formModel
: TiDynamic
FormControlModel = this.get
FormModel();
formModel.relations = [
...
formModel.relations,
{
match
: MATCH_HIDDEN,
when
: [
{
id
: Dynamic
FormCommonId.HIDDEN,
value
: false
}
]
},
{
match
: MATCH_DISABLED,
when
: [
{
id
: Dynamic
FormCommonId.DISABLE,
value
: true
}
]
}
];
return [
formModel];
}
getModels
ForSingleUse()
: TiDynamic
FormControlModel {
const
formModel
: TiDynamic
FormControlModel = this.get
FormModel('single');
formModel.id += 'single';
return
formModel;
}
getCurrent
FormValue()
: any {
const currentTab
: any = this.tabs.find((tab) => tab.active === true);
return this.checkAndGet
FormValue(currentTab?.
formGroup, `#${currentTab?.id}`);
}
abstract get
FormModel(id?
: string)
: TiDynamic
FormControlModel;
}
dynamic-
form-grid-editable.module.ts文件
import { NgModule } from "@angular/core";
// tiny modules
import { TiContainerModule, TiHeaderOperatorsModule } from "@cloud/tinycloud";
import { TiButtonModule, Ti
FormfieldModule, TiTabModule } from "@cloud/tiny3";
import { TiDynamic
FormCoreModule, TiDynamicGridModule } from "@cloud/ti-dynamic-
form";
import { Dynamic
FormGr
idEditableComponent } from "./Dynamic
FormGr
idEditableComponent";
@NgModule({
imports: [
TiContainerModule,
TiHeaderOperatorsModule,
TiButtonModule,
Ti
FormfieldModule,
TiTabModule,
TiDynamic
FormCoreModule,
TiDynamicGridModule
],
declarations
: [Dynamic
FormGr
idEditableComponent],
})
export class Dynamic
FormGr
idEditableModule {}
帮我学会这个组件使用
没有检索到摘要
扫一扫
65
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
