在没有多个 *ngIf 的情况下显示反应式表单错误消息的最佳做法是什么？

Question

我正在开发包含工作相关字段的工作表单，其中一些字段有超过 5 个验证。

这是我的 Html 代码：

<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 端的代码有点困难。我该如何克服这个问题？

请参阅下面的 link，它与我的有点相同，但未标记为答案，也未找到有关所提供答案的任何文档。

Best way to show error messages for angular reactive forms, one formcontrol multiple validation errors?

提前致谢。

Answer 1

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

我已经使用 @rxweb/reactive-form-validators 来显示没有 *ngIf 的错误消息。

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

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 的情况下显示反应式表单错误消息的最佳做法是什么？

What is the best practice to show Reactive Form Error Message without multiple *ngIf?

angular

angular-reactive-forms