string 文本框
默认小部件,一般用于字符串元素。
代码演示
基础样例
最简单的用法。
import { Component } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { SFSchema, SFStringWidgetSchema, SFValueChange } from '@delon/form';
@Component({
selector: 'form-string-simple',
template: `<sf [schema]="schema" (formValueChange)="valueChange($event)" (formSubmit)="submit($event)"></sf>`,
})
export class FormStringSimpleComponent {
schema: SFSchema = {
properties: {
name: {
type: 'string',
title: 'Name',
ui: {
addOnAfter: 'RMB',
placeholder: 'RMB结算',
change: val => console.log(val),
focus: e => console.log('focus', e),
blur: e => console.log('blur', e),
enter: e => console.log('enter', e),
} as SFStringWidgetSchema,
},
mobile: {
type: 'string',
format: 'mobile',
title: '手机号'
},
sfz: {
type: 'string',
format: 'id-card',
title: '身份证号'
},
color: {
type: 'string',
format: 'color',
title: '颜色'
},
},
required: ['name'],
};
constructor(public msg: NzMessageService) {}
submit(value: any): void {
this.msg.success(JSON.stringify(value));
}
valueChange(res: SFValueChange): void {
this.msg.info(JSON.stringify(res));
}
}
API
schema 属性
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
[maxLength] | 表单最大长度 | number | - |
[readOnly] | 禁用状态 | boolean | - |
ui 属性
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
[type] | 等同 input 的 type 值,例如:password | string | - |
[placeholder] | 在文字框中显示提示讯息 | string | - |
[autocomplete] | 自动完成功能的表单 | HTML Attribute | - |
[autofocus] | 当页面加载时获得焦点 | HTML Attribute | - |
[addOnBefore] | 前置标签,等同 nzAddOnBefore | string | - |
[addOnAfter] | 后置标签,等同 nzAddOnAfter | string | - |
[addOnBeforeIcon] | 前置Icon,等同 nzAddOnBeforeIcon | string | - |
[addOnAfterIcon] | 后置Icon,等同 nzAddOnAfterIcon | string | - |
[prefix] | 带有前缀图标的 input,等同 nzPrefix | string | - |
[prefixIcon] | 前缀图标,等同 nzPrefixIcon | string | - |
[suffix] | 带有后缀图标的 input,等同 nzSuffix | string | - |
[suffixIcon] | 后缀图标,等同 nzSuffixIcon | string | - |
[change] | 内容变更事件 | (val: string) => void | - |
[focus] | 焦点事件 | (e: FocusEvent) => void | - |
[blur] | 失焦事件 | (e: FocusEvent) => void | - |
[enter] | 回车事件 | (e: KeyboardEvent) => void | - |