Angular 10 中未显示验证消息

Posted 2023-03-21

【中文标题】Angular 10 中未显示验证消息

【英文标题】：Validation message not showing in Angular 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>

【参考方案1】：

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