问题描述
限时送ChatGPT账号..我正在开发工作表单,其中包含与工作相关的字段,其中一些字段有 5 个以上的验证.
这是我的 Html 代码:
<div><input type="text" formControlName="userName"/><div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.required"class="警报警报-危险">必需的....<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.maxLength"class="警报警报-危险">最大长度 10
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.exits"class="警报警报-危险">用户已经退出
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.shouldNotSameAsName"class="警报警报-危险">不应与名称相同.
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.minLength"class="警报警报-危险">最小长度为 5
在我的工作表单中,一个向导中有超过 15 个字段,使用 *ngIf 条件管理 HTML 端的代码有点困难.我该如何克服这个问题?
请参阅下面的链接,该链接与我的有点相似,但未标记为答案,也未找到有关所提供答案的任何文档.
最佳方式显示角度反应式表单的错误消息,一个表单控制多个验证错误?
提前致谢.
解决方案有人回答了这个问题,我的问题已通过提供的答案解决.但是那个已经被删除了,我不知道为什么.
我使用过 @rxweb/reactive-form-validators 用于显示没有 *ngIf 的错误消息.
我使用RxFormBuilder"创建了一个 FormGroup 对象并使用了 FormControl 的 errorMessage 属性.以下是我从提供的答案中下载的 TS 代码:
export class AppComponent {用户表单组:表单组;构造函数(私有表单生成器:RxFormBuilder){}ngOnInit(){//这用于全局配置验证消息.https://www.rxweb.io/api/reactive-form-configReactiveFormConfig.set({验证消息":{"required":"此字段为必填项","minLength":"最小长度为 {{0}}","maxLength":"允许的最大长度为 {{0}}"}});this.userFormGroup = this.formBuilder.group({用户名:['',[RxwebValidators.required(),RxwebValidators.minLength({value:5}),RxwebValidators.maxLength({value:10})]]})}
HTML 代码:
I am developing job form which contains job related fields and some of the fields have more than 5 validation.
Here is my Html Code:
<div [formGroup]="jobForm">
<div>
<input type="text" formControlName="userName"/>
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.required"
class="alert alert-danger">
Required....
</div>
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.maxLength"
class="alert alert-danger">
max length 10
</div>
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.exits"
class="alert alert-danger">
user is already exits
</div>
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.shouldNotSameAsName"
class="alert alert-danger">
Should Not Same as name.
</div>
<div *ngIf="jobForm.controls.userName.errors && jobForm.controls.userName.errors.minLength"
class="alert alert-danger">
minimum length is 5
</div>
</div>
In my job form there are more than 15 fields in one wizard, It is bit difficult to manage the code on HTML side with *ngIf conditions. How can I overcome this problem?
See the below link, which is little bit same as mine but it is not marked as answer and not found any documentation on the provided answer.
Best way to show error messages for angular reactive forms, one formcontrol multiple validation errors?
Thanks in advance.
解决方案Someone has answered this question and my issue was resolved with the provided answer. But that has been removed, I don't know why.
I have used @rxweb/reactive-form-validators for showing error message without *ngIf.
I have used 'RxFormBuilder' to create a FormGroup object and used errorMessage property of FormControl. Below is the TS code which I have downloaded form the provided answer:
export class AppComponent {
userFormGroup:FormGroup;
constructor(private formBuilder:RxFormBuilder){}
ngOnInit(){
//this is used for to configure validation message globally. https://www.rxweb.io/api/reactive-form-config
ReactiveFormConfig.set({
"validationMessage":{
"required":"This field is required",
"minLength":"minimum length is {{0}}",
"maxLength":"allowed max length is {{0}}"
}
});
this.userFormGroup = this.formBuilder.group({
userName:['',[RxwebValidators.required(),RxwebValidators.minLength({value:5}),RxwebValidators.maxLength({value:10})]]
})
}
Html Code :
<form [formGroup]="userFormGroup">
<div class="form-group">
<label>UserName</label>
<input type="text" formControlName="userName" class="form-control" />
{{userFormGroup.controls.userName["errorMessage"]}}
</div>
</form>
这篇关于在没有多个 *ngIf 的情况下显示反应式表单错误消息的最佳做法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论