angular - 如何显示反应式表单验证错误消息
问题描述
大家好,
我正在努力为名称输入制作验证器,我刚刚从 angular wiki 回复了代码,但仍然无法正常工作。
你能帮我找出问题吗?
谢谢指教。
我的 HTML 代码:
<form [formGroup]="formAlta" (ngSubmit)="addRepresentacio()">
<div class="form-group">
<label for="namePro">Nom</label>
<input id="namePro" class="form-control" formControlName="namePro" placeholder="Nom del professional" required>
<div *ngIf="namePro.invalid && (namePro.dirty || namePro.touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="namePro.errors.required">
El Nom del professional es obligatori
</div>
</div></form>
还有我的 TS 组件
formAlta: FormGroup;
ngOnInit() {
this.formAlta = new FormGroup({
idPro: new FormControl(),
documentTypePro: new FormControl(),
namePro: new FormControl('',[Validators.required]),
rProfessional: new FormControl(this.tipusPro),
firstSurnamePro: new FormControl(),
secondSurnamePro: new FormControl(),
businessNamePro: new FormControl(),
idCli: new FormControl(),
documentTypeCli: new FormControl(),
nameCli: new FormControl('',Validators.required),
rClient: new FormControl(this.tipusCli),
firstSurnameCli: new FormControl(),
secondSurnameCli: new FormControl(),
businessNameCli: new FormControl(),
idPermis: new FormArray([]),
dateFiPermis: new FormArray([])
});
}
解决方案
您应该在您的 component.ts 中创建一个 getter 方法,如下所示以获取模板中的表单控件
get formAltaControls(): any {
return this.formAlta['controls'];
}
在你的 componen.html
<div *ngIf="formAltaControls.namePro.invalid && (formAltaControls.namePro.dirty || formAltaControls.namePro.touched)" class="alert alert-danger form-danger" role="alert">
<div *ngIf="formAltaControls.namePro.errors.required">
El Nom del professional es obligatori
</div>
推荐阅读
- c# - C# 中的嵌套 JSON 解析
- jquery - 光滑滑块上的灯箱并将内容添加到与图像一起弹出的灯箱
- javascript - 使用 jquery 函数播放或暂停视频
- python-3.x - 就像我们在 scala 中一样,如何在 python 中一次性完成 Groupby 和 map
- python - 两个类似文件之一无法识别 date_parser 格式
- python - 使用多 GPU 和多线程、Pytorch 的对象检测推理
- python-3.x - 为什么使用 opencv 进行图像屏蔽会返回“输入参数的大小不匹配”?
- c# - 计划的 .NET WebJob V3 示例
- python-3.x - 使用 Python 向其他用户授予使用谷歌表的权限
- ruby-on-rails - 在没有 webpack 开发服务器的 Heroku 上部署 Rails React 应用程序