用于类属性的 Typescript 类验证器答案

【问题标题】：Typescript Class-Validator for property of class用于类属性的 Typescript 类验证器
【发布时间】：2021-07-24 12:46:23
【问题描述】：

我试图使用类验证器装饰器library 进行验证过程。所以，我在我的示例项目中实现了。但是，它不起作用。示例项目正在尝试使用用户输入创建示例项目，并且我正在尝试检查这些输入（例如我的代码中的示例，我正在尝试使用该类验证 title 的 contains -validator。但是，装饰器是在输入元素的值集合之前执行的。所以，title总是看起来是空的，验证失败。

我错过了什么？如何使用该库从输入中获取有效到即将到来的值？

我的 app.ts = >

import { validate, Contains } from "class-validator";

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;
  formElement: HTMLFormElement;

  @Contains("hello")
  titleInputElement: HTMLInputElement;

  descriptionInputElement: HTMLInputElement;
  peopleInputElement: HTMLInputElement;

  constructor() {
    this.templateElement = <HTMLTemplateElement>(
      document.getElementById("project-input")!
    );
    this.hostElement = <HTMLDivElement>document.getElementById("app")!;
    const importedNode = document.importNode(
      this.templateElement.content,
      true
    );
    this.formElement = <HTMLFormElement>importedNode.firstElementChild;
    this.formElement.id = "user-input";

    this.titleInputElement = <HTMLInputElement>(
      this.formElement.querySelector("#title")
    );

    this.descriptionInputElement = <HTMLInputElement>(
      document.getElementById("description")
    );

    this.peopleInputElement = <HTMLInputElement>(
      document.getElementById("people")
    );
    this.configure();
    this.attach();
  }

  private submitHandler(event: Event) {
    event.preventDefault();
    console.log(this.titleInputElement.value);
  }

  private configure() {
    this.formElement.addEventListener("submit", this.submitHandler.bind(this));
  }
  private attach() {
    this.hostElement.insertAdjacentElement("afterbegin", this.formElement);
  }
}

const prjInputExample = new ProjectInput();
validate(prjInputExample).then((errors) => {
  // errors is an array of validation errors
  if (errors.length > 0) {
    console.log("validation failed. errors: ", errors);
  } else {
    console.log("validation succeed");
  }
});

index.html =>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ProjectManager</title>
    <link rel="stylesheet" href="app.css" />
    <script src="bundles/bundle.js" defer></script>
  </head>
  <body>
    <template id="project-input">
      <form>
        <div class="form-control">
          <label for="title">Title</label>
          <input type="text" id="title" />
        </div>
        <div class="form-control">
          <label for="description">Description</label>
          <textarea id="description" rows="3"></textarea>
        </div>
        <div class="form-control">
          <label for="people">People</label>
          <input type="number" id="people" step="1" min="0" max="10" />
        </div>
        <button type="submit">ADD PROJECT</button>
      </form>
    </template>
    <template id="single-project">
      <li></li>
    </template>
    <template id="project-list">
      <section class="projects">
        <header>
          <h2></h2>
        </header>
        <ul></ul>
      </section>
    </template>
    <div id="app"></div>
  </body>
</html>

【问题讨论】：

标签： javascript typescript class-validator typescript-decorator

【解决方案1】：

您将 validate 方法放在 app.ts 脚本中。它在脚本执行时调用，因此在页面加载时调用。如果我理解你，你想在用户在 titleInputElement 中输入另一个字符时进行验证。你可以通过

@Contains('hello')
titleValue: string;

titleInputElement.addEventListener('input', event => {
    this.titleValue = this.titleInputElement.value;
    validate(this);
})

值得一提的是，您需要验证 titleInputElement: HTMLElement 以外的其他属性。正如docs 所说：

@Contains(seed: string) 检查字符串是否包含种子。

所以它必须是字符串属性（在我的示例中是 titleValue）

【讨论】：

当标题包含特定字符串时，我想使用类验证器库进行验证，如上例“hello”。我尝试使用您的代码，但它对我不起作用，或者仍然，我遗漏了一些东西。
我已经编辑了我的帖子。我错过了 titleInputElement 类型不适合 @Contains。
我收到该错误：“EventTarget”类型上不存在属性“值”。如果您可以克隆该项目并且可以从您身边尝试它，我将不胜感激。回购的link
this.titleValue = this.titleInputElement.value;应该做得更好