title: Typescript Class-Validator for property of class
body: <p>I was trying to use the class-validator decorator <a href="https://github.com/typestack/class-validator" rel="nofollow noreferrer">library</a> for the validation processes . So, I was implemented on my sample project. But, it is not working.  The sample project is trying to create sample projects with user inputs and I am trying to check those inputs(example on my code I am trying to validate <strong>contains</strong> of <strong>title</strong>  with that class-validator. But, decorators are executing before the set of value of input elements. So, the <strong>title</strong> looks empty all time, and validation fails.</p>
  <p>What I am missing? How can I use that library for valid to upcoming value from inputs?</p>
  <p><strong>My app.ts = &gt;</strong></p>
  <hr />
  <pre><code>import { validate, Contains } from &quot;class-validator&quot;;
  
  class ProjectInput {
    templateElement: HTMLTemplateElement;
    hostElement: HTMLDivElement;
    formElement: HTMLFormElement;
  
    @Contains(&quot;hello&quot;)
    titleInputElement: HTMLInputElement;
  
    descriptionInputElement: HTMLInputElement;
    peopleInputElement: HTMLInputElement;
  
    constructor() {
      this.templateElement = &lt;HTMLTemplateElement&gt;(
        document.getElementById(&quot;project-input&quot;)!
      );
      this.hostElement = &lt;HTMLDivElement&gt;document.getElementById(&quot;app&quot;)!;
      const importedNode = document.importNode(
        this.templateElement.content,
        true
      );
      this.formElement = &lt;HTMLFormElement&gt;importedNode.firstElementChild;
      this.formElement.id = &quot;user-input&quot;;
  
      this.titleInputElement = &lt;HTMLInputElement&gt;(
        this.formElement.querySelector(&quot;#title&quot;)
      );
  
      this.descriptionInputElement = &lt;HTMLInputElement&gt;(
        document.getElementById(&quot;description&quot;)
      );
  
      this.peopleInputElement = &lt;HTMLInputElement&gt;(
        document.getElementById(&quot;people&quot;)
      );
      this.configure();
      this.attach();
    }
  
    private submitHandler(event: Event) {
      event.preventDefault();
      console.log(this.titleInputElement.value);
    }
  
    private configure() {
      this.formElement.addEventListener(&quot;submit&quot;, this.submitHandler.bind(this));
    }
    private attach() {
      this.hostElement.insertAdjacentElement(&quot;afterbegin&quot;, this.formElement);
    }
  }
  
  const prjInputExample = new ProjectInput();
  validate(prjInputExample).then((errors) =&gt; {
    // errors is an array of validation errors
    if (errors.length &gt; 0) {
      console.log(&quot;validation failed. errors: &quot;, errors);
    } else {
      console.log(&quot;validation succeed&quot;);
    }
  });
  </code></pre>
  <p><strong>index.html =&gt;</strong></p>
  <hr />
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot; /&gt;
      &lt;title&gt;ProjectManager&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;app.css&quot; /&gt;
      &lt;script src=&quot;bundles/bundle.js&quot; defer&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;template id=&quot;project-input&quot;&gt;
        &lt;form&gt;
          &lt;div class=&quot;form-control&quot;&gt;
            &lt;label for=&quot;title&quot;&gt;Title&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;title&quot; /&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-control&quot;&gt;
            &lt;label for=&quot;description&quot;&gt;Description&lt;/label&gt;
            &lt;textarea id=&quot;description&quot; rows=&quot;3&quot;&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-control&quot;&gt;
            &lt;label for=&quot;people&quot;&gt;People&lt;/label&gt;
            &lt;input type=&quot;number&quot; id=&quot;people&quot; step=&quot;1&quot; min=&quot;0&quot; max=&quot;10&quot; /&gt;
          &lt;/div&gt;
          &lt;button type=&quot;submit&quot;&gt;ADD PROJECT&lt;/button&gt;
        &lt;/form&gt;
      &lt;/template&gt;
      &lt;template id=&quot;single-project&quot;&gt;
        &lt;li&gt;&lt;/li&gt;
      &lt;/template&gt;
      &lt;template id=&quot;project-list&quot;&gt;
        &lt;section class=&quot;projects&quot;&gt;
          &lt;header&gt;
            &lt;h2&gt;&lt;/h2&gt;
          &lt;/header&gt;
          &lt;ul&gt;&lt;/ul&gt;
        &lt;/section&gt;
      &lt;/template&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>