在没有多个 *ngIf 的情况下显示反应式表单错误消息的最佳实践是什么? [英] What is the best practice to show Reactive Form Error Message without multiple *ngIf?

查看：20
本文介绍了在没有多个 *ngIf 的情况下显示反应式表单错误消息的最佳实践是什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开发工作表单，其中包含与工作相关的字段，其中一些字段有 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 代码:

<div class="form-group"><label>用户名</label><input type="text" formControlName="userName" class="form-control"/>{{userFormGroup.controls.userName["errorMessage"]}}

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆