angular - 模型驱动/ react 形式 : Auto mapping from Model to FormGroup ?

标签 angular validation typescript angular2-template angular2-forms

有没有办法从模型中自动创建一个 FormGroup? 如果我有一个具有多个属性的模型:

模型:人

firstName: string,
lastName: string,
street: string
country: string
....

我想用它创建一个简单的 FormGroup:

表单:表单组

firstName: FormControl,
lastName: FormControl,
street: FormControl,
country: FormControl
....

在我看来,为模型中的每个属性显式定义一个 FormControl/FormGroup/FormArray 似乎很“脏”:

formBuilder.group({
  firstName: person.firstName,
  lastName: person.lastName,
  street: person.street,
  country: person.country,
  ...
});

每次来自后端的 API 发生变化时,我都必须调整模型和表单映射。 是否有某种生成器可以帮助我自动映射/创建 FormGroup ?

最佳答案

formBuilder.group({});

person.forEach(
        (prop) => {
            formBuilder.addControl(prop , new FormControl(person[prop], Validators.compose([ Validators.required])));
        }
    );

这不是一个完整的解决方案,因为验证器肯定会针对每个属性进行更改。

关于angular - 模型驱动/ react 形式 : Auto mapping from Model to FormGroup ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44018191/

相关文章:

javascript - 获取 tabView PrimeNG 的当前标题

c# - IP 地址验证

java - Bean 验证 - JSR-303 DuplicateItemCheck for a list in java

javascript - ie9 中的 Angular 1/2 混合应用程序错误 : "TypeError: Unable to get value of the property ' ref': object is null or undefined"

javascript - Angular - 内容投影/将异步数据传递给投影内容

zend-framework - Zend_Form 无效但没有错误消息

reactjs - 类型 'typeof test' 的参数不可分配给类型 'Component<{ children?: ReactNode; } & DispatchProp<any>>' 的参数

reactjs - 在 React 项目上运行 "Invalid option for project: true"时会产生什么 'tslint --project'?

javascript - 如何以与在 Javascript 中相同的方式在 Typescript 中访问 "this"?

angular - 我需要 Angular 2 中的多个项目轮播