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

Question

正在处理 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>

验证服务class

@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>

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

load reactive-form error validation message only on focus or on non valid data loading

angular-validation

angular

模板

验证服务class

组件

模板