angular - 错误消息未以反应形式显示
问题描述
我有一个带有三个错误消息的反应式表单,但是当我在文本框上输入内容时没有出现错误,我正在寻找丢失或输入错误的内容,但我什么也看不到。任何帮助将不胜感激。角度版本: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>
该表单只是几个文本框和一个按钮,其想法是,例如,当在第一个字符上只输入一个字符时,应该会出现最小长度的错误。
解决方案
您的 required 应该可以正常工作,因为它设置正确。对于IdTecnico
您设置的输入type="number"
。要验证数字类型输入,您不能使用minLength
或maxLength
。您可以查看此胎面以获取更多信息。如果您确实需要数字输入,您可以尝试使用min
和max
验证器。但是,查看您的输入时,您最好使用文本输入并添加一些自定义验证器来检查输入是否为某个数值。
没有看到@JhonJairoHernandezPulgarin 评论 - 你可以投票,因为它是正确的。
推荐阅读
- openapi - 谷歌教室里有没有返回谷歌见面地址的API?
- date - 如何绘制图表和正确的日期刻度?
- swift - 在 Swift 线程中限制 CPU 使用率
- javascript - 如何阻止 ajax 回调函数处理来自服务器的 res.redirect() 响应
- javascript - 用数组数据的javascript数组填充html表?
- javascript - php 主动导航栏与 php
- android - 如何获取类型化数组中项目的索引?
- python - 在不终止进程的情况下中止 Python 进程中的代码执行
- amazon-ecs - Fluentbit 从 AWS ECS 解析日志
- c# - 从 app.config 在 MVC .net core 3.1 中配置 Trace