使用装饰器在Angular 2中使用TypeScript进行验证

发布时间：2020-12-17 17:15:25 所属栏目：安全来源：网络整理

导读：我正在开发一个项目,我使用Angular 2和NodeJS与TypeScript. Angular2使用装饰器来定义组件.我希望能够以相同的方式在域对象上表达验证逻辑.这将是有用的,因为我可以表达一次验证规则并在服务器端和客户端使用它. 而不是像这样在标记中表达必填字段： input r

我正在开发一个项目,我使用Angular 2和NodeJS与TypeScript.

Angular2使用装饰器来定义组件.我希望能够以相同的方式在域对象上表达验证逻辑.这将是有用的,因为我可以表达一次验证规则并在服务器端和客户端使用它.

而不是像这样在标记中表达必填字段：

<input required [(ng-model)]="selectedHero.name"></input>

我想这样做：

class Hero {
    id: number;

    @Required
    name: string;
}

我正在试图弄清楚如何编写指令来读取元数据以将所需属性应用于输入元素以及NodeJS中以创建验证错误.任何指导表示赞赏.谢谢您的帮助.

解决方法

问题包括两件事：
– 基于装饰器验证模型
– 在UI中显示结果

首先,您可以使用任何打字稿验证器.例如.类验证器.第二部分我还在试图弄明白.

编辑：在调查之后,我会这样做：
使用Class Validator作为装饰器,使用angular 2表单构建器创建表单,附加到表单的valueChanged事件,在事件执行验证器并为您收到的每个验证错误设置相应的formcontrol错误. (查找setErrors方法.)

请记住,表单中的任何更改现在都会重新评估所有输入.这可能需要改进.此外,我将所有逻辑抽象为一个服务,它将提供一个基于typescript类的表单,并连接所需的所有东西.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!