title: Validation message not showing in Angular 10
body: <p>I have this on a form of Angular 10 that was working fine, but I didnt had any validation messages, so I added some validation messages. This is my html file:</p>
  <pre><code>&lt;form (ngSubmit)=&quot;onSubmit()&quot; [formGroup]=&quot;myForm&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;tecnico&quot;&gt;Técnico (*)&lt;/label&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;tecnico&quot; name=&quot;tecnico&quot; 
                formControlName=&quot;tecnico&quot; 
                 [ngClass]=&quot;{ 'is-invalid': submitted &amp;&amp; f.tecnico.errors}&quot;&gt;
  
              &lt;div *ngIf=&quot;submitted &amp;&amp; f.errors&quot; class=&quot;invalid-feedback&quot;&gt;
                  &lt;div *ngIf=&quot;f.tecnico.errors.required&quot;&gt;
                      El técnico es requerido
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>my ts file:</p>
  <pre><code>servicioSettings: ServicioSettings = {
      tecnico: null,
      servicioRealizado: null,        
      semanaDelAno: null,
      fechaDeInicio: null,
      horaDeInicio: null,
      fechaDeFinalizacion: null,
      horaDeFinalizacion: null,
      cantidadDeHoras: null,
      tipoDeHora: null
    };
    
    myForm: FormGroup;    
    submitted = false;
  
    constructor(private formBuilder: FormBuilder, private dataService: DataService)  {    }
  
    ngOnInit() {
      this.myForm = this.formBuilder.group({
        tecnico: [this.servicioSettings.tecnico, Validators.required],
        servicioRealizado: [this.servicioSettings.servicioRealizado, Validators.required],
        fechaDeInicio: [this.servicioSettings.fechaDeInicio, Validators.required],
        horaDeInicio: [this.servicioSettings.horaDeInicio, Validators.required],
        fechaDeFinalizacion: [this.servicioSettings.fechaDeFinalizacion, Validators.required],
        horaDeFinalizacion: [this.servicioSettings.horaDeFinalizacion, Validators.required]
      });
    }
  
    get f() { return this.myForm.controls }
  
    onSubmit() {
      this.submitted = true;
  
      if (this.myForm.invalid) {
        return      
      }
      alert ('Datos guardados')
    }
  </code></pre>
  <p>The textbox turns red, but the validation message doesnt appears... I was following a tutorial... is there something missing ?</p>
  <p>******************************* UPDATE ********************************</p>
  <pre><code>iniciarFormulario(){
    this.myForm = new FormGroup({
      tecnico: new FormControl(this.servicioSettings.tecnico, [Validators.required, Validators.minLength(4), Validators.maxLength(30)])
   
    });
  }
  
    ngOnInit() {
      this.iniciarFormulario();    
    }
  </code></pre>
  <p>HTML</p>
  <pre><code>  &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;tecnico&quot;&gt;Técnico &lt;/label&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;tecnico&quot; name=&quot;tecnico&quot; formControlName=&quot;tecnico&quot;
              [ngClass]=&quot;{ 'is-invalid': f.tecnico.errors}&quot; required&gt;
          &lt;ng-container *ngIf=&quot;f.tecnico.errors&quot;&gt;
              &lt;span *ngIf=&quot;f.tecnico.errors.required&quot;&gt;
                  El nombre del técnico es requerido
              &lt;/span&gt;
              &lt;span *ngIf=&quot;f.tecnico.errors.minlength&quot;&gt;
                  El nombre del técnico debe ser mínimo de 4 letras
              &lt;/span&gt;
              &lt;span *ngIf=&quot;f.tecnico.errors.maxlength&quot;&gt;
                  El nombre del técnico debe ser máximo de 30 letras
              &lt;/span&gt;
          &lt;/ng-container&gt;
      &lt;/div&gt;
  </code></pre>