Angular2 — проверка FormControl при размытии

ИЗМЕНИТЬ 2

Как Alex и официальная документация говорит, что Angular версии 5.0.0 имеет новую опцию для вашей ngModel updateOn: 'blur'

this.email = new FormControl(null, {
   validators: Validators.required,
   updateOn: 'blur'
});

Также вы можете использовать другие варианты обновления: change (по умолчанию), blur, submit.

Исходный

Я использую директиву, в которой удаляю всю проверку в фокусе и возвращаю ее обратно после события размытия. Он основан на ответе Кристиана Дешама.

Я обновляю достоверность только при размытии, поэтому, если значение было недопустимым до фокуса, оно будет недействительным после. Но если вы начнете ввод, валидность будет обновлена.

По некоторым причинам порядок очистки имеет смысл, поэтому я сначала очищаю асинхронные валидаторы.

Любое предложенное предложение будет полезно =)

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[validate-onblur]',
  host: {
    '(focus)': 'onFocus($event)',
    '(blur)': 'onBlur($event)'
  }
})
export class ValidateOnBlurDirective {
    private validators: any;
    private asyncValidators: any;
    constructor(public formControl: NgControl) {
    }
    onFocus($event) {
      this.validators = this.formControl.control.validator;
      this.asyncValidators = this.formControl.control.asyncValidator;
      this.formControl.control.clearAsyncValidators();
      this.formControl.control.clearValidators();
    }

    onBlur($event) {
      this.formControl.control.setAsyncValidators(this.asyncValidators);
      this.formControl.control.setValidators(this.validators);
      this.formControl.control.updateValueAndValidity();
    }
}

Кроме того, следите за обновлениями в этой ветке Angular 2 github о проверке onBlur.

ИЗМЕНИТЬ 1

Есть еще проблема - если я просто нажму на поле и после клика прочь - будет вызвана валидация. Если у вас есть какое-либо уведомление об этом (или обращения к серверу) - оно будет появляться каждый раз, когда вы это делаете. Таким образом, вы можете добавить свойство wasChanged и использовать его следующим образом:

    @Directive({
        selector: '[validate-onblur]',
        host: {
            '(focus)': 'onFocus($event)',
            '(blur)': 'onBlur($event)',
            '(keyup)': 'onKeyup($event)',
            '(change)': 'onChange($event)',
            '(ngModelChange)': 'onNgModelChange($event)'
        }
    })
    export class ValidationOnBlurDirective {
        private validators: any;
        private asyncValidators: any;
        private wasChanged: any;
        constructor(public formControl: NgControl) {
        }
        onFocus($event) {
            this.wasChanged = false;
            this.validators = this.formControl.control.validator;
            this.asyncValidators = this.formControl.control.asyncValidator;
            this.formControl.control.clearAsyncValidators();
            this.formControl.control.clearValidators();
        }
        onKeyup($event) {
            this.wasChanged = true; // keyboard change
        }
        onChange($event) {
            this.wasChanged = true; // copypaste change
        }
        onNgModelChange($event) {
            this.wasChanged = true; // ng-value change
        }
        onBlur($event) {
            this.formControl.control.setAsyncValidators(this.asyncValidators);
            this.formControl.control.setValidators(this.validators);
            if (this.wasChanged)
                this.formControl.control.updateValueAndValidity();
        }
    }

Начиная с Angular v 5.0.0 это теперь возможно, пометив updateOn: 'blur' в элементе управления формы.

Это также означает, что valueChanges не срабатывает для этого элемента управления формы, пока не произойдет событие размытия. Вот пример с minlength вместе с required:

this.form = new FormGroup({
  username: new FormControl('', {
  validators: [Validators.required, Validators.minLength(6)], updateOn: 'blur'} )
})

get username() {
  return this.form.get('username');
}

В шаблоне вы хотите отметить, что сообщение проверки не будет отображаться, если поле не равно touched:

<div *ngIf="username.hasError('minlength') || username.hasError('required') 
              && username.touched">Required and minlength 6!
</div>

DEMO

P.S. При необходимости вы также можете пометить это на всей форме, а не только на определенном элементе управления формы

Нашел способ, в rc6.

1- Создайте директиву: validate-onblur.directive.ts

@Directive({
  selector: '[validate-onblur]',
  host: {
    '(focus)': 'onFocus($event)',
    '(blur)': 'onBlur($event)'
  }
})
export class ValidateOnBlurDirective {
    constructor(public formControl: NgControl) {
    }

    onFocus($event) {
      this.formControl.control.markAsUntouched(false);
    }

    onBlur($event) {
      this.formControl.control.markAsTouched(true);
    }
}

Затем в вашем html-шаблоне просто добавьте директиву в форму, в моем примере используется модель ReactiveFormsModule.

Затем добавьте это в сообщение об ошибке:

<input type="text" formControlName="full_name" validate-onblur />

<span *ngIf="formAccountDetails.controls.full_name.touched && !formAccountDetails.controls.full_name.valid && !formAccountDetails.controls.full_name.pristine" class="errors">
        ...
</span>

Примерно так: используйте свойство touched объекта ngControl.

 <div class="form-group" [class.has-error]="!name.valid && name.touched">
        <label for="name">Name</label>
        <input #name="ngForm" ngControl="name" name="name" type="text" class="form-control" required>
 </div>

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

@Directive({
    selector: '[validate-onblur]',
    host: {
        '(focus)': 'onFocus($event)',
        '(blur)' : 'onBlur($event)'
    }
})
export class ValidateOnBlurDirective {

    private validators: any;
    private asyncValidators: any;
    private hasFocus = false;

    constructor(public formControl: NgControl) {
    }

    onFocus($event) {
        this.hasFocus = true;
        this.validators = this.formControl.control.validator;
        this.asyncValidators = this.formControl.control.asyncValidator;
        this.formControl.control.clearAsyncValidators();
        this.formControl.control.clearValidators();
        this.formControl.control.valueChanges
            .filter(() => this.hasFocus)
            .subscribe(() => this.formControl.control.markAsPending());
    }

    onBlur($event) {
        this.hasFocus = false;
        this.formControl.control.setAsyncValidators(this.asyncValidators);
        this.formControl.control.setValidators(this.validators);
        this.formControl.control.updateValueAndValidity();
    }
}

Таким образом, элемент управления будет оставаться в состоянии ожидания до тех пор, пока он сохраняет фокус. Это поможет избежать случая, когда элемент управления недействителен до того, как он получит фокус, а затем, как только пользователь начнет печатать на нем, он будет помечен как действительный, до того, как произойдет событие размытия, когда снова будут установлены валидаторы и реальная действительность контроль должен быть определен.

Ты можешь

[class.has-error]="!form.controls['ctrlEmailAddress'].valid"

Это добавит класс has-error, как только вы измените модель. Так что в основном вам не нужно размывать, чтобы проверить проверку.

Это решило проблему с бета-версией angular 2.0.0;)