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

问题描述

我正在开发工作表，其中包含与工作相关的字段，并且某些字段的验证次数超过5.

I am developing job form which contains job related fields and some of the fields have more than 5 validation.

这是我的HTML代码:

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>
  

在我的工作表中，一个向导中有15个以上的字段，使用* ngIf条件在HTML端管理代码有点困难.我该如何克服这个问题?

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.

最佳方法显示角反应形式的错误消息，一种形式控制多个验证错误?

谢谢.

推荐答案

有人回答了这个问题，我的问题已通过提供的答案得到解决.但这已被删除，我不知道为什么.

Someone has answered this question and my issue was resolved with the provided answer. But that has been removed, I don't know why.

我使用了 @ rxweb/reactive-form-validators 用于显示不带* ngIf的错误消息.

I have used @rxweb/reactive-form-validators for showing error message without *ngIf.

我已经使用'RxFormBuilder'创建了一个FormGroup对象，并使用了FormControl的errorMessage属性. 以下是我从提供的答案中下载的TS代码:

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代码:

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