Custom

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

Usage

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

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

Examples

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';

@Component({
  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>
            <input
              nz-input
              [attr.id]="i.id"
              [disabled]="i.disabled"
              [attr.disabled]="i.disabled"
              [nzSize]="i.size"
              [ngModel]="i.value"
              (ngModelChange)="i.setValue($event)"
            />
          </div>
          <div nz-col>
            <button nz-button type="button" nzType="link" (click)="updateQr()">{{ ui.btnText }}</button>
          </div>
        </div>
      </ng-template>
      <ng-template sf-template="qr" let-i let-ui="ui" let-schema="schema">
        <qr [value]="i.value"></qr>
      </ng-template>
    </sf>
  `
})
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: 'https://ng-alain.com'
      }
    }
  };

  constructor(private msg: NzMessageService) {}

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

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

NameDescriptionType
[$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.