ng-alain的sf schema中自定义widget如何检测值变更并传递数据？

实现逻辑说明 #

ng-alain 的 SF 自定义 widget 统一继承 ControlWidget 基类，你可以直接通过基类提供的能力完成值同步和回调触发，完整实现步骤如下：

1. 自定义 Widget 组件逻辑编写 #

核心要做两件事：一是把组件内的值同步给 SF 表单，二是触发你在 ui 里配置的 change 回调。

import { Component } from '@angular/core';
import { ControlWidget } from '@delon/form';

@Component({
  selector: 'sf-my-widget',
  template: `
    <!-- 以下为示例自定义控件结构，替换成你自己的组件内容即可 -->
    <input 
      type="number" 
      [value]="value" 
      (input)="handleValueUpdate($event.target.value)"
    />
  `
})
export class MyWidgetComponent extends ControlWidget {
  // 组件内部值变更时触发该方法
  handleValueUpdate(newValue: number) {
    // 1. 同步值到 SF 表单模型，调用后SF会自动更新表单状态、校验结果等
    this.setValue(newValue);

    // 2. 调用schema中ui配置的change回调，存在该配置才执行
    if (this.ui.change) {
      this.ui.change(newValue);
    }
  }
}

如果你用 [(ngModel)] 做内部值的双向绑定，把上面的逻辑放到 ngModelChange 事件中执行即可，效果完全一致。

2. 注册自定义 Widget 到 SF #

必须先完成注册，SF 才能识别到你自定义的 widget 类型：

import { NgModule } from '@angular/core';
import { DelonFormModule, WidgetRegistry } from '@delon/form';
import { MyWidgetComponent } from './my-widget.component';

@NgModule({
  declarations: [MyWidgetComponent],
  imports: [DelonFormModule],
  exports: [MyWidgetComponent]
})
export class MyWidgetModule {
  constructor(widgetRegistry: WidgetRegistry) {
    // 注册名和schema中ui.widget配置的'my-widget'保持一致
    widgetRegistry.register('my-widget', MyWidgetComponent);
  }
}

内容的提问来源于stack exchange，提问作者Burhan