Angular Ionic 3 Form Builder以正确的方式验证消息

Question

这个问题可能是重复的，但我尝试用谷歌搜索这个问题的正确方法或解决方案。所以这个问题很简单，就像标题中所说的那样。如何在 Angular 4 formBuilder 中以简洁的结构或正确的方式显示验证错误消息。

我有一个现有代码在表单中显示验证错误，但以硬编码方式或混乱的代码结构。下面是我的代码

html 文件

 <ion-input #firstName class="input-cover" (tap)="focusToTopFields('firstName')" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
            [class.invalid]="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)"
            [class.valid]="!form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)"></ion-input>

            <!-- Validation for First Name -->
            <div *ngIf="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)">
              <small class="error-message" *ngIf="form.controls['firstName'].errors.required">
                First name is required.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.minlength">
                First name must be atleast 3 characters long.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.pattern">
                First name cannot accept numeric characters or special characters.
              </small>
            </div>

ts 文件

在 formBuilder 组内

firstName: ["", Validators.compose([Validators.minLength(3), Validators.maxLength(40), Validators.pattern("[a-zA-Z ]*"), Validators.required])],

现在代码仍然可以理解发生了什么。但是想象一下，如果我有一个很大的表格来填写大量的输入字段，这会是什么样子。这将无法维护或变得一团糟。

是的，我可以使用一些组件通过Input decorator 显示错误消息，但我仍在寻找一种方法，如何不对我的 html 文件中的所有验证消息进行硬编码

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

我们同意这一点，当我们为任何响应式表单添加验证消息时，我们需要考虑脏和错误。您正在处理所需的 3 个验证，minLength 和模式。所以你会有冗长的 Condition 和每个验证器特定的消息。

你可以这样做，将验证条件逻辑移动到组件并从模板调用。

<ion-input #firstName class="input-cover" (tap)="focusToTopFields('firstName')" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
            [class.invalid]="isFormFieldDirty('firstName')"
            [class.valid]="!isFormFieldDirty('firstName')"></ion-input>

            <!-- Validation for First Name -->
            <div *ngIf="isFormFieldDirty('firstName')">
              <small class="error-message" *ngIf="form.controls['firstName'].errors.required">
                First name is required.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.minlength">
                First name must be atleast 3 characters long.
              </small>
              <small class="error-message" *ngIf="form.controls['firstName'].errors.pattern">
                First name cannot accept numeric characters or special characters.
              </small>
            </div>

组件：

isFormFieldDirty(fieldName: string){
     return this.formGroup.get('fieldName').errors && this.formGroup.get('fieldName').dirty && this.formGroup.get('fieldName').touched;
}