string 文本框

默认小部件,一般用于字符串元素。

代码演示

string 文本框 - 图1

基础样例

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { NzMessageService } from 'ng-zorro-antd/message';
  3. import { SFSchema, SFStringWidgetSchema, SFValueChange } from '@delon/form';
  4. @Component({
  5. selector: 'form-string-simple',
  6. template: `<sf [schema]="schema" (formValueChange)="valueChange($event)" (formSubmit)="submit($event)"></sf>`,
  7. })
  8. export class FormStringSimpleComponent {
  9. schema: SFSchema = {
  10. properties: {
  11. name: {
  12. type: 'string',
  13. title: 'Name',
  14. ui: {
  15. addOnAfter: 'RMB',
  16. placeholder: 'RMB结算',
  17. change: val => console.log(val),
  18. focus: e => console.log('focus', e),
  19. blur: e => console.log('blur', e),
  20. enter: e => console.log('enter', e),
  21. } as SFStringWidgetSchema,
  22. },
  23. mobile: {
  24. type: 'string',
  25. format: 'mobile',
  26. title: '手机号'
  27. },
  28. sfz: {
  29. type: 'string',
  30. format: 'id-card',
  31. title: '身份证号'
  32. },
  33. color: {
  34. type: 'string',
  35. format: 'color',
  36. title: '颜色'
  37. },
  38. },
  39. required: ['name'],
  40. };
  41. constructor(public msg: NzMessageService) {}
  42. submit(value: any): void {
  43. this.msg.success(JSON.stringify(value));
  44. }
  45. valueChange(res: SFValueChange): void {
  46. this.msg.info(JSON.stringify(res));
  47. }
  48. }

API

schema 属性

成员说明类型默认值
[maxLength]表单最大长度number-
[readOnly]禁用状态boolean-

ui 属性

成员说明类型默认值
[type]等同 input 的 type 值,例如:passwordstring-
[placeholder]在文字框中显示提示讯息string-
[autocomplete]自动完成功能的表单HTML Attribute-
[autofocus]当页面加载时获得焦点HTML Attribute-
[addOnBefore]前置标签,等同 nzAddOnBeforestring-
[addOnAfter]后置标签,等同 nzAddOnAfterstring-
[addOnBeforeIcon]前置Icon,等同 nzAddOnBeforeIconstring-
[addOnAfterIcon]后置Icon,等同 nzAddOnAfterIconstring-
[prefix]带有前缀图标的 input,等同 nzPrefixstring-
[prefixIcon]前缀图标,等同 nzPrefixIconstring-
[suffix]带有后缀图标的 input,等同 nzSuffixstring-
[suffixIcon]后缀图标,等同 nzSuffixIconstring-
[change]内容变更事件(val: string) => void-
[focus]焦点事件(e: FocusEvent) => void-
[blur]失焦事件(e: FocusEvent) => void-
[enter]回车事件(e: KeyboardEvent) => void-