title: Why my Angular Form shows error validations only after submit?
body: <p>I am using ReactiveForms module to build up a form for adding a new member. I have validators in my component.ts but the template errors are showing up only when clicking the submit button. I want to achieve to show or not error messages every keystroke or when each input is touched. I have followed tutorials but can't figure out what is wrong.</p>
  <p>My form template:</p>
  <pre><code>&lt;form autocomplete=&quot;off&quot; [formGroup]=&quot;addMemberForm&quot; (ngSubmit)=&quot;onSubmit()&quot; class=&quot;ml-5&quot;&gt;
    &lt;span class=&quot;form-text text-danger&quot; [ngClass]=&quot;displayIfValueisValid('name')&quot;&gt;You have entered an incorrect name.&lt;/span&gt;
    &lt;app-form-input-text [label] = &quot;'Name'&quot; [type]=&quot;'text'&quot; [placeholder]=&quot;'Ex: Adam'&quot; [isRequired]=&quot;true&quot; formControlName=name ngDefaultControl&gt;&lt;/app-form-input-text&gt;
  &lt;/form&gt;
  </code></pre>
  <p>My form component:</p>
  <pre><code>export class MemberAddComponent implements OnInit {
  
    regexValidateSpecialCharacters: string =
      &quot;^[a-zA-ZÀ-ÿ\u00f1\u00d1]+(\\s*[a-zA-ZÀ-ÿ\u00f1\u00d1]*)*[a-zA-ZÀ-ÿ\u00f1\u00d1]+$&quot;;
    regexValidateEmail: string = &quot;^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$&quot;;
    regexValidateUsername: string = &quot;^[a-zA-Z0-9.]*$&quot;;
  
    addMemberForm: FormGroup = this.formBuilder.group({
      name: [
        &quot;&quot;,
        [
          Validators.required,
          Validators.pattern(this.regexValidateSpecialCharacters),
          Validators.maxLength(255),
        ],
      ],
      surname: [
        &quot;&quot;,
        [
          Validators.required,
          Validators.pattern(this.regexValidateSpecialCharacters),
          Validators.maxLength(255),
        ],
      ],
      role: [
        &quot;&quot;,
        [
          Validators.required,
          Validators.pattern(this.regexValidateSpecialCharacters),
          Validators.maxLength(255),
        ],
      ],
      email: [
        &quot;&quot;,
        [
          Validators.required,
          Validators.pattern(this.regexValidateEmail),
          Validators.maxLength(255),
        ],
      ],
      username: [
        &quot;&quot;,
        [
          Validators.required,
          Validators.pattern(this.regexValidateUsername),
          Validators.maxLength(255),
        ],
      ],
      comments: [
        &quot;&quot;,
        [
          Validators.pattern(this.regexValidateSpecialCharacters),
          Validators.maxLength(255),
        ],
      ],
    });
  
    constructor(
      private formBuilder: FormBuilder
    ) {}
  
    ngOnInit(): void {
      this.addMemberForm.reset({});
    }
  
    displayIfValueisValid(value: string): string {
      if (
        this.addMemberForm.get(value)?.invalid &amp;&amp;
        this.addMemberForm.get(value)?.touched
      )
        return &quot;d-block&quot;;
      return &quot;d-none&quot;;
    }
  
  
    onSubmit() {
      if (this.addMemberForm.invalid) this.addMemberForm.markAllAsTouched();
      else {
      }
    }
  }
  </code></pre>
  <p>My generic input template:</p>
  <pre><code>    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label class=&quot;font-weight-bold&quot;&gt;{{ label }}&lt;input type =&quot;{{ type }}&quot; class=&quot;form-control&quot; id=&quot;input&quot; placeholder=&quot;{{placeholder}}&quot; required=&quot;{{ isRequired }}&quot;&gt;&lt;/label&gt;
  
  &lt;/div&gt;
  </code></pre>