NG 动态表单材料UI
安装
npm i @danielhokanson/ng-dynamic-forms-ui-material -S
导入
所有组件都是独立的,由使用它们的组件直接导入:
import { ReactiveFormsModule } from '@angular/forms';
import {
DynamicMaterialFormComponent,
DynamicMaterialFormControlContainerComponent
} from '@danielhokanson/ng-dynamic-forms-ui-material';
@Component({
standalone: true,
imports: [ReactiveFormsModule, DynamicMaterialFormComponent, DynamicMaterialFormControlContainerComponent],
templateUrl: './my-form.component.html'
})
export class MyFormComponent {}
使用量
与 DynamicMaterialFormComponent数字 :
<form [formGroup]="myFormGroup">
<dynamic-material-form [group]="myFormGroup"
[model]="myFormModel"></dynamic-material-form>
</form>
与 DynamicMaterialFormControlContainerComponent数字 :
<form [formGroup]="myFormGroup">
@for (controlModel of myFormModel; track controlModel.id) {
<dynamic-material-form-control [group]="myFormGroup"
[model]="controlModel"></dynamic-material-form-control>
}
</form>
窗体控件
| 控制权 | 型号 | 所需财产 |
|---|---|---|
| 自动完成 | DynamicInputModel | list |
| 复选框 | DynamicCheckboxModel | – 说吧 – |
| 复选框组 | DynamicCheckboxGroupModel | – 说吧 – |
| 芯片 | DynamicInputModel | multiple: true |
| 摘取日期者 | DynamicDatePickerModel | – 说吧 – |
| 投入 | DynamicInputModel | – 说吧 – |
| 无线电组 | DynamicRadioGroupModel | – 说吧 – |
| 选择 | DynamicSelectModel | – 说吧 – |
| 幻灯片 | DynamicSliderModel | – 说吧 – |
| 幻灯片切换 | DynamicSwitchModel | – 说吧 – |
| 文本区域 | DynamicTextAreaModel | – 说吧 – |
自定义 UI 事件
<form [formGroup]="myFormGroup">
<dynamic-material-form [group]="myFormGroup"
[model]="myFormModel"
(matEvent)="onMatEvent($event)"></dynamic-material-form>
</form>