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

请参阅下面的链接，该链接与我的链接有点相似，但未标记为答案，也没有在提供的答案中找到任何文档。

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的情况下显示Reactive Form错误消息的最佳实践是什么？

1 个答案: