错误消息未以反应形式显示

Question

我有一个包含三个错误消息的反应式表单，但是当我在文本框中输入内容时，没有出现错误，我正在搜索丢失或输入错误的内容，但我什么也看不到。 任何帮助将不胜感激。 角度版本：12.2.10

.ts 文件：

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文件：

<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>

表单只是几个文本框和一个按钮，例如，在第一个字符上只输入一个字符时，应该会出现最小长度的错误。

Answer 1

您的 required 应该可以正常工作，因为它设置正确。 对于IdTecnico输入，您设置type="number" 。 要验证数字类型输入，您不能使用minLength或maxLength 。 您可以检查此胎面以获取更多信息。 如果您确实需要数字输入，您可以尝试使用min和max验证器。 但是，查看您的输入，您最好使用文本输入并添加一些自定义验证器，检查输入是否为某个数值。

没有看到@JhonJairoHernandezPulgarin 的评论——你可以点赞，因为它是正确的。