我们可以为 Angular 响应式表单创建模型类（DTO）吗？答案

【问题标题】：Can we create model classes (DTOs) for Angular reactive forms?我们可以为 Angular 响应式表单创建模型类（DTO）吗？
【发布时间】：2019-04-09 07:48:54
【问题描述】：

在 MVC 或 Rest API 中，我们有模型类 (DTO) 来传输数据。我们如何创建这些模型类并将它们用于 Angular 中的响应式表单？

【问题讨论】：

试试这个stackoverflow.com/questions/49997765/…

标签： asp.net-mvc angular angular6

【解决方案1】：

我在我的项目中使用包（@rxweb/reactive-form-validators）进行基于模型的响应式表单验证。

为了您的理解，我复制了相应文章“New way to validate the reactive forms”的 stackbliz 示例中的代码

您可以通过验证装饰器在属性之上定义验证。请参阅下面的代码用户类和应用@required 验证装饰器。

import { required,compare } from "@rxweb/reactive-form-validators";

export class User {

    @required()
    userName: string;

    @required()
    password: string;

    @compare({fieldName:'password'})
    confirmPassword:string;

}

这是组件代码，要创建表单组，您必须使用 RxFormBuilder。

export class UserAddComponent implements OnInit {

    userFormGroup: FormGroup
    user:User;
    constructor(
        private formBuilder: RxFormBuilder
    ) { }

    ngOnInit() {
        this.user = new User();
        this.userFormGroup = this.formBuilder.formGroup(this.user);
    }
}

完成。根据您的自定义需要绑定html。

StackBlitz Example

【讨论】：