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

Question

进行角度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;
}

Answer 1

这使您的错误消息等待，直到与输入

进行交互

form.controls[question.key].touched

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

它可以像这样

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

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

您还可以使用指令来初始触摸输入字段，因此验证将适用。我猜你必须修改条件执行。

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

Answer 2

我已经完成了

成分

export class myComponent implements OnInit {

  private isQuestionValueExist: boolean = false;

get isValueExist(){

var questionValue = this.form.controls[this.question.key].value;

if(questionValue!=null && questionValue!=""){
  this.isQuestionValueExist = true;
}
else{
   this.isQuestionValueExist = false;
}
   return this.isQuestionValueExist;
}

模板

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

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