如何在服务器端重用 Angular 表单进行验证？答案

【问题标题】：How do I reuse Angular form on server side for validation?如何在服务器端重用 Angular 表单进行验证？
【发布时间】：2017-10-19 16:44:50
【问题描述】：

我想使用 Angular 4.4.5 和 NodeJS 7.10.1（Ubuntu repos 中的最新版本）在客户端和服务器端重用相同的验证器集。我相信这是可能的。

我的基本想法是让 HTTP 端点在 NodeJS 和 Express 上工作，它接受来自 Angular 表单的 JSON 数据的 POST 请求，用接收到的数据创建相同的表单并检查它。

我的尝试没有成功，我不知道如何使用与 Angular 相同版本的 Typescript 以及如何使用表单导入组件。看到一些有效的简单示例将是理想的。我很快就会分享我的尝试。

【问题讨论】：

标签： node.js angular validation

【解决方案1】：

到目前为止，我设法以这种方式实例化了 Component。

创建cli.ts 来测试Angular组件的独立创建：

import 'reflect-metadata';
import { CuComponent } from './app/cu.component';

console.log(new CuComponent())

使用来自tsconfig.json 的一些设置运行tsc：

tsc -t es5 --lib es2016,dom --experimentalDecorators src/cli.ts

得到输出：

CuComponent {
  registration: 
   FormGroup {
     validator: null,
     asyncValidator: null,
     _onCollectionChange: [Function],
     _pristine: true,
     _touched: false,
     _onDisabledChange: [],
     controls: { familyName: [Object], givenName: [Object], phone: [Object] },
     _valueChanges: 
      EventEmitter {
        _isScalar: false,
        observers: [],
        closed: false,
        isStopped: false,
        hasError: false,
        thrownError: null,
        __isAsync: false },
     _statusChanges: 
      EventEmitter {
        _isScalar: false,
        observers: [],
        closed: false,
        isStopped: false,
        hasError: false,
        thrownError: null,
        __isAsync: false },
     _status: 'VALID',
     _value: { familyName: null, givenName: null, phone: null },
     _errors: null } }

组件已创建。

【讨论】：

有人有这方面的工作例子吗？使用 json 数据并回复验证期间发现的错误的 Web 服务？

【解决方案2】：

经过长时间的搜索，我找到了解决方案。 Angular 现在支持带有库的工作区和使用 Node 和 Express.js 对表单 (ssr) 进行服务器端渲染。所以 Angular 8+ 基本上已经具备了所需的一切。

我所做的是将所有共享代码放在一个库中，这样我就可以在前端使用它，也可以在 SSR 应用程序上重用它（验证）。我不认为这是必要的，但干净的结构是有帮助的。

为了创建我刚刚使用 cli 的结构：

创建新工作区。
为共享代码生成库。
为前端生成应用程序（普通 ng 应用程序）。
为验证服务器生成应用程序并在其上运行ng add @nguniversal/express-engine。

您可以在教程中找到有关如何执行此操作的所有相关信息：

SSR/通用：https://angular.io/guide/universal
CLI：https://angular.io/cli
反应形式：https://angular.io/guide/reactive-forms

现在我使用了生成的server.ts 并删除了其中的大部分（示例处理程序）。首先，我在 JSON 解析方面遇到了一些问题。但是body-parser可以做到。

// ...
import * as bodyParser from "body-parser";
// ...
export function app() {
  const server = express();
  server.use(bodyParser.json());
  // ...

然后我添加了这个处理程序：

  server.post('/api/validate', (req, res) => {
    // createFormGroup is from my code, 
    // because I generate the form from TypeScript classes.
    // You can just use a FormBuilder in your component 
    // and export the function so you can use it here.
    const fg = createFormGroup();     
    fg.patchValue(req.body);
    res.status(200).send({
        "accepted" : "VALID" === fg.status
        // You can send additional information, like errors
      });
  });

调用fg.updateValueAndValidity() 似乎没有必要，因为patchValue 已经完成了这一切。

是时候构建和启动服务器了。
不知何故，我现在遇到了一个问题，即构建脚本不适用于--prod。但这确实：
ng build; ng run validation:server:production; npm run serve:ssr

你应该得到：
Node Express server listening on http://localhost:4000

就是这样。真的很容易。

我使用 curl 进行测试：

curl.exe --data "@data.json" -H "Content-Type: application/json" -X POST http://localhost:4000/api/validate

我不知道如何调试它，但console.log 工作得很好。并且要测试您在此服务器上使用的代码，无论如何您都应该使用单元测试（茉莉花）。因此，即使启动速度很慢，我也很高兴现在可以在服务器上验证代码。

递归比较 req.body 和 fg.value 是否相等可能有意义，以确保在验证后它仍然是相同的数据。

【讨论】：