[Angular] ngx-formly (AKA angular-formly for Angular latest version)
2024-08-31 09:47:38
In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might come across. Therefore if you need a more complex setup you might want to take a look at ngx-formly. Formly has been a very popular library even in AngularJS 1.x for rendering dynamic forms.
Ngx-formly is the Angular (2+) counterpart for doing this job. In this lesson we’ll quickly give it a look at how to transform our custom dynamic form rendering to use ngx-formly. For more use cases definitely check out the official ngx-formly repository on GitHub.
Add module to the root:
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
// for material2 import `FormlyMaterialModule`:
// import {FormlyMaterialModule} from '@ngx-formly/material';
@NgModule({
imports: [
...,
ReactiveFormsModule,
FormlyModule.forRoot(),
FormlyBootstrapModule,
// for material2 use:
// FormlyMaterialModule
],
})
export class AppModule {}
One difference from angular-formly with ngx-formly is the validation:
import { Validators } from '@angular/forms';
import { Component } from '@angular/core';
import { FormlyFieldConfig } from '@ngx-formly/core';
@Component({
selector: 'app-root',
template: `
<h1>Dynamic reactive forms in Angular</h1>
<app-dynamic-form [data]="person" [formDataObj]="personFields"></app-dynamic-form>
`
})
export class AppComponent {
person = {
firstname: 'Juri',
age: 32,
gender: 'M'
};
personFields = <FormlyFieldConfig>[
{
key: 'firstname',
type: 'input',
templateOptions: {
label: 'Firstname'
},
validators: {
validation: Validators.required
},
validation: {
messages: {
required: 'You need to provide a value'
}
}
},
{
key: 'age',
type: 'input',
templateOptions: {
label: 'Age',
type: 'number'
},
validators: {
validation: Validators.min(18)
},
validation: {
messages: {
min: 'You need to specify a value greater or equal to 18'
}
}
},
{
key: 'gender',
type: 'radio',
templateOptions: {
label: 'Gender',
options: [{ value: 'Male', key: 'M' }, { value: 'Female', key: 'F' }]
}
}
];
}
More infromation to check out.
最新文章
- who命令的总结
- IOS- DocumentInteraction Controllerl的使用
- vim 查找时忽略大小写
- ijg库的使用的几点注意
- PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
- codeforces 485B Valuable Resources 解题报告
- 利用crontab定时备份数据库为sql文件
- 初识vi编辑器
- 【英语】Bingo口语笔记(35) - 常见单词结尾发音
- 详解boost库中的Message Queue .
- 加入指数（IOS开发）
- B/S 和 C/S两种架构
- [LeetCode] Super Washing Machines 超级洗衣机
- Oracle入门《Oracle介绍》第一章1-4 Oracle 用户管理
- delphi创建动态菜单
- git checkout -b 分支name 分支的新建, 切换, 删除, 查看
- homebrew, carthage以及redis的安装和启动
- Windows开发经验 - WinDbg
- HDOJ(HDU).4508 湫湫系列故事――减肥记I (DP 完全背包)
- easing.js让页面动画丰富起来