Question

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

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

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

Answer 1

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

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

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

console.log(new CuComponent())

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

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 } }

创建了组件。

Answer 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解析方面遇到了一些问题。但是身体分析器可以做到。

// ...
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是否相等，以确保验证后它们仍然是相同的数据。

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

2 个答案: