загрузить сообщение проверки ошибок реактивной формы только в фокусе или при загрузке неверных данных

Question

работает на угловых 5 формах проверки.Все работает нормально, за исключением сообщения об ошибке, показывающего загрузку страницы движения, что хорошо, только если загруженные данные не жалуются на проверку, но не на нетронутые вкладки, т.е. пустое текстовое поле.

Я хочу показать сообщение об ошибке только тогда, когда пользовательначните печатать, кроме случаев, когда загруженные данные недействительны.удивительно, что minLength и maxLength ведут себя так, как я хочу, не уверенный в других

template

<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

здесь я сделал

компонент

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>

Answer 2

Это заставляет ваши сообщения об ошибках ждать до тех пор, пока взаимодействие не будет выполнено с помощью ввода

form.controls[question.key].touched

Необходимо либо исключить условие, либо добавить другое, которое будет учитывать факт загрузки данных во внимание.

это может быть так

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

, поэтому будут появляться ошибки, если форма недействительна И (вход был затронут ИЛИ данные были загружены откуда-то)

Вы можететакже используйте директиву для первоначального касания поля ввода, таким образом, будет применяться валидация.Я думаю, вам придется изменить его для условного исполнения.

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