ohayolibs/packages/components/se/index.zh-CN.md

Ohayo is a set of essential modules for ohayojp.

---
type: CURD
title: se
subtitle: 编辑
cols: 1
order: 3
module: import { SEModule } from '@ohayo/components/se';
---

简化表单HTML模板的高阶组件，并进一步优化了一些细节：

- 更友好的表单校验状态
- 自动化响应式布局
- 自动维护表单 `id`

它由 `se-container` 容器（指令）和 `se` 组件来表示一个表单，一个简单HTML模板表单是这么写的：

```html
<form nz-form #f="ngForm" se-container="2">
  <se label="App Key">
    <input type="text" nz-input [(ngModel)]="i.ak" name="ak" required>
  </se>
  <se label="App Secret">
    <input type="text" nz-input [(ngModel)]="i.sk" name="sk" required maxlength="32">
  </se>
  <se>
    <button nz-button nzType="primary" [disabled]="f.invalid">Save</button>
  </se>
</form>
```

同时，会自动处理所有 Angular 内置校验指令，例如：`required`、`maxlength`、`min`、`pattern` 等，并以红色边框来表示无效值状态。

## API

### se-container

| 成员 | 说明 | 类型 | 默认值 | 全局配置 |
|----|----|----|-----|------|
| `[gutter]` | 间距，当 `nzLayout:horizontal` 时有效 | `number` | `32` | ✅ |
| `[se-container]` | 指定表单元素最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定 | `'1','2','3','4','5','6'` | - |  |
| `[col]` | 指定表单元素最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定 | `'1','2','3','4','5','6'` | - | ✅ |
| `[labelWidth]` | 表单元素默认标签文本宽度，单位：`px` | `number` | `150` | ✅ |
| `[nzLayout]` | 表单布局，当 `inline` 时强制大小为 `compact` | `'horizontal','vertical','inline'` | `'horizontal'` | ✅ |
| `[size]` | 大小 `compact` 紧凑型，强制忽略 `error`、`extra` 展示 | `'default','compact'` | `'default'` | ✅ |
| `[firstVisual]` | 是否立即呈现错误视觉 | `boolean` | `false` | ✅ |
| `[ingoreDirty]` | 是否忽略 `dirty` 校验 | `boolean` | `false` | ✅ |
| `[line]` | 分隔线 | `boolean` | `false` |  |
| `[title]` | 标题 | `string,TemplateRef<void>` | - |  |
| `[errors]` | 批量修改 `se` 错误消息描述 | `SEErrorRefresh[]` | - |  |

### se

| 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[col]` | 指定表单元素最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定（继承于 `se-container`） | `'1','2','3','4','5','6'` | - |
| `[label]` | 标签文本 | `string, TemplateRef<void>` | - |
| `[labelWidth]` | 标签文本宽度，单位：`px`（继承于 `se-container`） | `number` | - |
| `[optional]` | 标签可选信息 | `string, TemplateRef<void>` | - |
| `[optionalHelp]` | 标签可选帮助 | `string, TemplateRef<void>` | - |
| `[optionalHelpColor]` | 标签可选帮助背景颜色	 | `string` | - |
| `[error]` | 错误描述 | `string, TemplateRef<void>, { [key: string]: string, TemplateRef<void> }` | - |
| `[extra]` | 额外提示信息 | `string, TemplateRef<void>` | - |
| `[required]` | 是否必填项标识符，若不设置自动根据表单元素是否有 `RequiredValidator` 校验来设置值 | `string` | - |
| `[controlClass]` | 控件区域样式名 | `string` | - |
| `[id]` | 自定义组件 `id` | `string` | - |
| `[line]` | 分隔线（继承于 `se-container`） | `boolean` | - |

### se-title

用于展示标题，单独一行。

## 常见问题

### 什么时候自定义组件id

点击表单的 Label 会将光标定位至相应组件下，而 `ng-edit` 会自动根据 `ngModel` 状态合理的设定 `id`，绝大多数情况下你无须关心 `id` 的绑定状态，当然若你手动指定 `id` 值则优先级更高但同时你需要自己维护组件对应的 `id` 值。