Angular 10 中未显示验证消息答案

【问题标题】：Validation message not showing in Angular 10Angular 10 中未显示验证消息
【发布时间】：2021-05-29 12:51:33
【问题描述】：

我在一个工作正常的 Angular 10 表单上有这个，但我没有任何验证消息，所以我添加了一些验证消息。这是我的 html 文件：

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
        <div class="form-group">
            <label for="tecnico">Técnico (*)</label>
            <input type="text" class="form-control" id="tecnico" name="tecnico" 
              formControlName="tecnico" 
               [ngClass]="{ 'is-invalid': submitted && f.tecnico.errors}">

            <div *ngIf="submitted && f.errors" class="invalid-feedback">
                <div *ngIf="f.tecnico.errors.required">
                    El técnico es requerido
                </div>
            </div>
        </div>

我的 ts 文件：

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')
  }

文本框变为红色，但没有出现验证消息...我正在关注教程...是否缺少某些内容？

************************************ 更新 *************** *****************

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

  ngOnInit() {
    this.iniciarFormulario();    
  }

HTML

  <div class="form-group">
        <label for="tecnico">Técnico </label>
        <input type="text" class="form-control" id="tecnico" name="tecnico" formControlName="tecnico"
            [ngClass]="{ 'is-invalid': f.tecnico.errors}" required>
        <ng-container *ngIf="f.tecnico.errors">
            <span *ngIf="f.tecnico.errors.required">
                El nombre del técnico es requerido
            </span>
            <span *ngIf="f.tecnico.errors.minlength">
                El nombre del técnico debe ser mínimo de 4 letras
            </span>
            <span *ngIf="f.tecnico.errors.maxlength">
                El nombre del técnico debe ser máximo de 30 letras
            </span>
        </ng-container>
    </div>

【问题讨论】：

标签： angular forms validation bootstrap-4

【解决方案1】：

现在可以了，我做了一些更改，都在更新部分

【讨论】：