Custom the current dynamic form widget. For more complexity, please refer to customize widget.


Make sure to specify sf-template a valid path value, for example:

  <ng-template sf-template="formFieldName" let-i let-ui="ui" let-schema="schema">


Basic Usage

Use the sf-template directive to custom complex widget in the current form.

expand codeexpand code
import { Component, ViewChild } from '@angular/core';

import { SFComponent, SFSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';

  selector: 'form-custom-simple',
  template: `
    <sf #sf [schema]="schema" (formSubmit)="submit($event)">
      <ng-template sf-template="formName" let-i let-ui="ui" let-schema="schema">
        <div nz-row>
          <div nz-col>
          <div nz-col>
            <button nz-button type="button" nzType="link" (click)="updateQr()">{{ ui.btnText }}</button>
      <ng-template sf-template="qr" let-i let-ui="ui" let-schema="schema">
        <qr [value]="i.value"></qr>
export class FormCustomSimpleComponent {
  @ViewChild('sf') readonly sf!: SFComponent;
  schema: SFSchema = {
    properties: {
      formName: {
        type: 'string',
        title: 'Custom Title',
        ui: {
          widget: 'custom',
          btnText: 'Update Qr'
        default: 'test'
      qr: {
        type: 'string',
        ui: {
          widget: 'custom'
        default: ''

  constructor(private msg: NzMessageService) {}

  updateQr(): void {
    const formNameValue = this.sf.getProperty('/formName')?.value;
    const qr = this.sf.getProperty('/qr');
    qr?.setValue(formNameValue, true);`Suc`);

  submit(value: {}): void {


[$implicit]Current widget component instanceControlWidget
[schema]Schema data of the widgetSFSchema
[ui]UI data of the widgetSFUISchemaItem

The widget component instance include formProperty property, whose value attribute is the only way to communicate with the widget.

The widget component instance contains some shortcut properties and methods, please read for more details ControlWidget.