Question

该问题可能重复，但我尝试使用Google搜索以找到正确的方法或解决此问题的方法。因此，问题很简单，如标题中所述。如何在 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文件中的所有验证消息进行硬编码< / strong>

感谢有人可以帮助您。预先感谢。

Answer 1

我们对此表示同意，当我们为任何反应形式添加验证消息时，我们需要考虑脏和错误。您正在处理3个必需的验证（minLength和pattern）。因此，您将获得冗长的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;
}

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

1 个答案: