Angular2 反应形式根据验证失败条件显示错误消息

Question

我想提一下，我正在使用单独的通用组件来显示错误，所以我没有将它们直接放在 html 中以避免重复，所以我不能直接链接和硬编码条件模板。

我有这个字段并应用了两个验证：

this.username = new FormControl('', [ Validators.minLength(5), Validators.required ]);

如何显示每次验证的验证错误消息？假设如果提交时字段中没有任何内容，我想显示这两个错误：
"Minimum length is 5"
"Field is required"

然后如果你在里面放东西，它应该只显示：
"Minimum length is 5"

这是一个示例，但我的真实示例是比较两个电子邮件字段，如果它们相同，那么如果电子邮件不正确，则应显示：
"Email is not correct"
"Email is not the same as first email field"

因此，如果电子邮件正确且电子邮件不相同，则应仅显示：
"Email is not the same as first email field"

如果未通过，我有验证工作，但我不确定如何分别显示一个验证通过而另一个未通过，因为我必须正确附加失败的真正原因，而不是给出一些通用的原因两个。

完整示例：

错误显示组件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-field-error-display',
  templateUrl: './field.error.display.component.html',
  styleUrls: ['./field.error.display.component.css']
})
export class FieldErrorDisplayComponent
{
    @Input() errorMsg: string;
    @Input() displayError: boolean;
}

组件html：

<div *ngIf="displayError" >
  <small>{{errorMsg}}</small>
</div>

Register.html中错误显示的使用：

<form [formGroup]="_form" (ngSubmit)="register()">
<h4>Create a new account</h4>
<div class="form-group">
  <label for="email">Email Address</label>
  <input class="form-control" name="email" formControlName="email" />
  <app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'email')" errorMsg="Please insert correct email"></app-field-error-display>
</div>
<div class="form-group">
  <label for="emailConfirm">Email Address Confirm</label>
  <input class="form-control" name="emailConfirm" formControlName="emailConfirm" />
  <app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'emailConfirm')" errorMsg="Please insert correct email"></app-field-error-display>
</div>
<div class="form-group">
  <label for="password">Password</label>
  <input class="form-control" name="password" formControlName="password" />
  <app-field-error-display [displayError]="formValidationService.IsFieldValid(_form,'password')" errorMsg="Please insert password"></app-field-error-display>
</div>
<button type="submit" class="btn btn-default">Create Account</button>
</form>
<div *ngIf="_registered" class="alert alert-success box-msg" role="alert">
  <strong>Account registered!</strong> You will be redirected in sec
</div>

注册组件：

ngOnInit() {
    this._form = this._formBuilder.group({
        email: ['', [Validators.required, Validators.email]],
        emailConfirm: ['', [Validators.required, Validators.email, MatchOtherValidator.Validate('email')]],
        password: ['', [Validators.required]]
    });

    this._registerModel = new RegisterModel();
}

自定义匹配其他验证器：

import { FormControl } from '@angular/forms';

export class MatchOtherValidator {
    static Validate(otherControlName: string) {

        let thisControl: FormControl;
        let otherControl: FormControl;

        return function matchOtherValidate(control: FormControl) {

            if (!control.parent) {
                return null;
            }

            // Initializing the validator.
            if (!thisControl) {
                thisControl = control;
                otherControl = control.parent.get(otherControlName) as FormControl;
                if (!otherControl) {
                    throw new Error('matchOtherValidator(): other control is not found in parent group');
                }
                otherControl.valueChanges.subscribe(() => {
                    thisControl.updateValueAndValidity();
                });
            }

            if (!otherControl) {
                return null;
            }

            if (otherControl.value !== thisControl.value) {
                return {
                    matchOther: true
                };
            }

            return null;

        }
    }
}

表单验证服务有这个方法：

public IsFieldValid(form: FormGroup, field: string){
    return !form.get(field).valid && form.get(field).dirty;
}

Answer 1

您的代码仅检查表单控件是否脏和无效。但是您想检查特定验证是否失败。所以你需要传递一个额外的error参数（'required'、'minlength'等），并使用

form.get(field).hasError(error)

Answer 2

如果自定义验证器匹配 Other 失败，你应该 return {match Other: true} 并检查 form.get(field).hasError('matchOther');

Answer 3

我回答这个问题有点晚了，但我找到了一个解决方案，它是我真正喜欢的 angular 材料模块的一部分。如果您使用 "mat-form-field" 实现您的字段，您可以使用包含带 *ngIf 的跨度的 "mat-error" 轻松显示错误消息。

我想我应该把它放在那里供其他试图实现验证器错误消息的人使用。它使 HTML 有点结实，但看起来真的很不错。

<form [formGroup]="myForm" (ngSubmit)="submitForm()">
        <mat-form-field>
            <input matInput formControlName="user_input">
            <mat-error>
                <span *ngIf="myForm?.controls.user_input?.errors?.required">Required Field</span>
                <span *ngIf="myForm?.controls.user_input?.errors?.minLength">Minimum Length is 5</span>
            </mat-error>
        </mat-form-field>
</form>

文档可在此处找到：https://material.angular.io/components/form-field/overview#error-messages

Answer 4

在模板中您可以使用

<form class="example-form" [formGroup]="formName" (ngSubmit)="onFormSubmit()">

<input matInput #inputName formControlName="inputName"
              name="inputName" required/>
  <mat-error *ngIf="formName.get('inputName').hasError('required')">
        Email is <strong>required</strong>
  </mat-error>
</form>

Angular2 反应形式根据验证失败条件显示错误消息

Angular2 reactive forms show error messages based on validation fail condition

validation

angular

angular-reactive-forms