时间戳

首页 > 解决方案 > 仅在焦点或无效数据加载时加载反应式错误验证消息

angular - 仅在焦点或无效数据加载时加载反应式错误验证消息

问题描述

从事 Angular 5 表单验证。一切工作正常，除了错误消息显示移动页面加载，只有当加载的数据不抱怨验证但不抱怨未触及的选项卡，即空文本框时，这才正常。

我只想在用户开始输入时显示错误消息，除非加载的数据无效。令人惊讶的是， minLength 和 maxLength 表现得如我所愿，不确定其他人

模板

<div *ngIf="form.controls[question.key].invalid && (form.controls[question.key].invalid || form.controls[question.key].touched)" class="alert alert-danger">

    <div *ngIf="form.controls[question.key].hasError('required')">
      Name is required.
    </div>

    <div *ngIf="form.controls[question.key].hasError('email')">
      Email Format is Incorrect.
    </div>

    <div *ngIf="form.controls[question.key].hasError('minlength')">
      Minimum Length Required.
    </div>

    <div *ngIf="form.controls[question.key].hasError('maxlength')">
      Maximum Length Required.
    </div>

    <div *ngIf="form.controls[question.key].hasError('postCode')">
        PostCode Incorrect.
    </div>

</div>

验证服务类

@Injectable()
export class QuestionControlService {

    private validations: ValidatorFn[] = [];

    constructor() {
    }

    toFormGroup(questions: QuestionBase<any>[]) {
        let group: any = {};

        questions.forEach(question => {

            this.validations = [];

            debugger;

            for (var key in question.validations) {
                this.mapValidation(question.validations[key].title, question.validations[key].value);
            }
            group[question.key] = new FormControl(question.value || '', this.validations);

        });

        return new FormGroup(group);
    }


    mapValidation(validationTitle: string, validationValue: string) {
        if (validationTitle != null) {

            if (validationTitle == "minLength") {
                this.validations.push(Validators.minLength(parseInt(validationValue)));
            } else if (validationTitle == "maxLength") {
                this.validations.push(Validators.maxLength(parseInt(validationValue)));
            } else if (validationTitle == "required" && validationValue == "true") {
                this.validations.push(Validators.required)
            } else if (validationTitle == "emailType" && validationValue == "true") {
                this.validations.push(Validators.email);
            } else if (validationTitle == "postCodeType" && validationValue == "true") {
                this.validations.push(postCodeValidator);
            }
        }
    }
}

//Custom Validation
//-----------------

function postCodeValidator(control: FormControl) {
    let givenPostCode = control.value;

    let UKPostCodePattern = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))\s?[0-9][A-Za-z]{2})$/;

    var isUKPostCodeValid = UKPostCodePattern.test(givenPostCode);

    if (!isUKPostCodeValid) {
        return {
            postCode: {
                required: "UK Valid PostCode",
                provided: givenPostCode
            }
        }
    }
    return null;
}

标签： angularangular-validation

解决方案

这会使您的错误消息等到与输入完成交互

form.controls[question.key].touched

您必须排除条件或添加另一个条件，以考虑数据已加载的事实。

它可以是这样的

form.controls[question.key].touched || isDataLoaded

所以如果表单无效并且会出现错误（输入已被触摸或数据已从某处加载）

您还可以使用指令使输入字段最初被触摸，因此将应用验证。我猜你将不得不修改它以进行条件执行。

https://stackblitz.com/edit/angular-urqles-xbvkpn?file=app/input-overview-example.html

推荐阅读