Input Number

Enter a number within certain range with the mouse or keyboard.

Examples

Basic Usage

Simplest of usage.

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

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

@Component({
  selector: 'form-number-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `
})
export class FormNumberSimpleComponent {
  schema: SFSchema = {
    properties: {
      number: { type: 'number', minimum: 18, maximum: 100, multipleOf: 2, ui: { widgetWidth: 200 } },
      integer: { type: 'integer', default: 10 },
      unit: { type: 'number', default: 10, ui: { unit: '%' } as SFNumberWidgetSchema },
      prefix: { type: 'number', default: 10, ui: { prefix: '$' } as SFNumberWidgetSchema },
      hideStep: { type: 'number', default: 10, ui: { hideStep: true } as SFNumberWidgetSchema }
    }
  };

  constructor(private msg: NzMessageService) {}

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

API

schema

PropertyDescriptionTypeDefault
[minimum]min valuenumber-
[exclusiveMinimum]Indicate whether minimum are exclusive of the valueboolean-
[maximum]max valuenumber-
[exclusiveMaximum]Indicate whether maximum are exclusive of the valueboolean-
[multipleOf]Restricted to a multiple of a given number,number1
[change]Change event for the number(val?: number) => void-

ui

PropertyDescriptionTypeDefault
[prefix]Prefix, simplifying the use of nzFormatter, nzParser--
[unit]Unit, simplifying the use of nzFormatter, nzParser--
[formatter]Specifies the format of the value presented--
[parser]Specifies the value extracted from nzFormatter--
[precision]precision of input value--
[widgetWidth]Specify nz-number widthnumber90
[hideStep]Hide step iconbooleanfalse

QA

Why can't modify unit

All components of NG-ZORRO are in OnPush mode. A special case is that when the unit needs to be dynamically modified, it will only take effect when the ngModel change needs to be triggered once, so it's value needs to be changed, for example:

const ageProperty = this.sf.getProperty('/age')!;
ageProperty.widget.ui.unit ='c';
ageProperty.widget.setValue(null);
ageProperty.widget.setValue(statusProperty.value);