Error message not showing in a reactive form

Question

I have a reactive form with three error messages, but when I type something on the textboxes no errors are appearing, I´ve searching for something missing or mistyped, but I can´t see anything. Any help will be appreciated. Angular version: 12.2.10

Ts file:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators, FormControl} from '@angular/forms';
import { ServicioSettings } from '../data/servicio-settings';
import { DataService } from '../data/data.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


@Component({
  selector: 'app-verhoras',
  templateUrl: './verhoras.component.html',
  styleUrls: ['./verhoras.component.css']
})
export class VerhorasComponent implements OnInit {

  servicioSettings: ServicioSettings = {
    IdTecnico: null,
    tecnico: null,
    servicioRealizado: null,
    fechaDeInicio: null,
    horaDeInicio: null,
    semanaDelAno: null,    
    fechaDeFinalizacion: null,
    horaDeFinalizacion: null,
    cantidadDeHoras: null,
    tipoDeHora: null
  };

  myForm: FormGroup;  
  items: ServicioSettings;
  submitted = false;

   constructor(private formBuilder: FormBuilder, private dataService: DataService)  {   }       

    iniciarFormulario(){      
      this.myForm = new FormGroup({        
        IdTecnico: new FormControl(this.servicioSettings.IdTecnico, [Validators.required, Validators.minLength(4), Validators.maxLength(30)]),        
        semanaDelAno: new FormControl(this.servicioSettings.semanaDelAno,[Validators.required])       
      });     
   }

  ngOnInit(): void {
    this.iniciarFormulario();
  }

  onSubmit() {
    this.submitted = true;

    if (this.myForm.valid) {
        console.log(this.myForm.value)
        this.dataService.getServicioSettingsForm(this.myForm.value).subscribe(
            //result => console.log('success ', result),
            result => this.items = result,
            error => console.log('error ', error)
        );
    }

  }
}

Html file:

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
  <div class="form-group">
    <label for="IdTecnico">Id técnico (*)</label>
    <input type="number" class="form-control" id="IdTecnico" name="IdTecnico" formControlName="IdTecnico"/>
    <div class="alert-danger"
      *ngIf="
        myForm.get('IdTecnico').invalid &&
        (myForm.get('IdTecnico').dirty || myForm.get('IdTecnico').touched)
      "
    >
      <div *ngIf="myForm.get('IdTecnico').errors.required">
        El IdTecnico es requerido
      </div>
      <div *ngIf="myForm.get('IdTecnico').errors.minlength">
        El IdTecnico debe ser mínimo de 4 caracteres
      </div>
      <div *ngIf="myForm.get('IdTecnico').errors.maxlength">
        El IdTecnico debe ser máximo de 30 caracteres
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <label for="semanaDelAno">Semana del año (*)</label>
    <input
      type="number"
      class="form-control"
      id="semanaDelAno"
      formControlName="semanaDelAno"
    />
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="myForm.invalid">Enviar</button>
</form>

The form is just a couple of textboxes and a button, the idea is that for example when typing only one character on the first one, an error of min length should appears.

Looks okay? Try {{ myForm.get('IdTecnico').errors | json }} somewhere in the template (outside the ngIf) and see what it shows? — MikeOne, Oct 15 '21 at 18:02
Done... this is the form.value {IdTecnico: 1, semanaDelAno: 1} IdTecnico: 1 semanaDelAno: 1 [[Prototype]]: Object null still appears — Jhon Hernández, Oct 15 '21 at 18:31
@JhonJairoHernandezPulgarin `minLength, maxLength` Does not works on `type=number` should be `type='text'` [check](https://stackblitz.com/edit/angular-ivy-qeg65y?file=src%2Fapp%2Fapp.component.html) — navnath, Oct 15 '21 at 18:45
@JhonJairoHernandezPulgarin Check if this helps [Angular 4 Form Validators - minLength & maxLength does not work on field type number](https://stackoverflow.com/a/46129969/6099811) — navnath, Oct 15 '21 at 18:50
@JhonJairoHernandezPulgarin `min, max` Validators available for `input type number` — navnath, Oct 15 '21 at 19:03
Have you imported `ReactiveFormsModule` in the module of this component? — lmaonuts, Oct 16 '21 at 16:28

score 0 · Answer 1 · answered Oct 16 '21 at 17:38

Your required should work as it is set correctly. For IdTecnico input you set type="number". To validate number type input you cannot use minLength or maxLength. You can check this tread for additional info. If you do need numeric input you can try use min and max validators. However, looking at your input you better go with text input and add some custom validator checking if input is some numeric value.

Did not saw @JhonJairoHernandezPulgarin comment - you can upvote it as it is correct.

Error message not showing in a reactive form

1 Answers1