NG-ALAIN- 文档
开始使用 Schema 校验错误 自定义小部件 如何布局 常见问题
- Examples
在线校验器 acl ACL visibleIf 条件表达式 i18n 国际化 method 内置方法 modal 模态框
- 小部件
object 对象 array 数组 string 文本框 boolean 开关 number 数字 select 选择器 checkbox 多选框 custom 自定义 date 日期 radio 单选框 text 文本 textarea 多行文本框
- 非内置小部件
autocomplete 自动完成 cascader 级联选择 color 颜色 mention 提及 qr-code 二维码 rate 评分 segmented 分段控制器 slider 滑动输入条 tag 标签 time 时间 transfer 穿梭框 tree-select 树选择 upload 上传
- 第三方小部件
monaco-editor Monaco Editor tinymce Tinymce富文本
在模态框里使用表单是一种非常常见场景，其实 ng g ng-alain:edit edit 的时候会得到一个完整示例；会得到这样的一个HTML模板：
<sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
<div class="modal-footer">
<button nz-button type="button" (click)="close()">关闭</button>
<button nz-button type="submit" [nzType]="'primary'" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading">保存</button>
</div>
</sf>.modal-footer 已经非常友好的融合了自定义动态框。
代码演示
最简单的用法。
import { Component, inject } from '@angular/core';
import { DemoSfComponent } from '@shared';
import { ModalHelper } from '@delon/theme';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'form-modal-simple',
template: ` <button nz-button type="button" (click)="open()">Open</button> `,
standalone: true,
imports: [NzButtonModule]
})
export class FormModalSimpleComponent {
private readonly mh = inject(ModalHelper);
private readonly msg = inject(NzMessageService);
open(): void {
this.mh.create(DemoSfComponent).subscribe(res => this.msg.success(JSON.stringify(res)));
}
}