时间戳

首页 > 解决方案 > Angular 6 Reactive forms - 触发焦点/模糊验证

angular - Angular 6 Reactive forms - 触发焦点/模糊验证

问题描述

如何在模糊/聚焦/更改时触发验证消息？

我试过的：

import { FormGroup, Validators, FormBuilder, FormControlName, FormControl } from '@angular/forms';

// Component - Class implementation:

addressForm: FormGroup;

consructor(private fb: FormBuilder) { }

ngOnInit() {
    this.addressForm = this.fb.group({
      zip: ['', {
        validators: [Validators.required, Validators.minLength(4)],
        updateOn: 'change' //blur
      }] 
    });
}

但它不起作用..

标签： angularangular-reactive-formsreactive-forms

解决方案

我也遇到了这个问题，我像往常一样通过指令和服务解决了它。该指令附加到输入元素，并且服务协调应该触发验证的事件。

这是指令：

@Directive({
    selector: 'input, textarea, select'
})
export class TriggerValidationDirective {
    constructor(private svc: TriggerValidationService, private el: ElementRef) {
    }

    @HostListener('blur', ['$event'])
    @HostListener('selectionChange', ['$event'])
    @HostListener('change', ['$event'])
    onTriggerValidation(e) {
        this.svc.triggerValidation(this.el);
    }
}

这是服务

@Injectable({ providedIn: 'root' })
export class TriggerValidationService {
    private triggerValidationSubject = new Subject<ElementRef | null>();

    triggerValidation$ = this.triggerValidationSubject.asObservable();

    triggerValidation(el?: ElementRef<any>) {
        this.triggerValidationSubject.next(el);
    }
}

以下是我在包含反应形式的组件中使用它的方式：

@Component({
  // ... selector, etc.
  providers: [ { provide: TriggerValidationService, useClass: TriggerValidationService } ]
})
export class TheComponent implements OnInit, OnDestroy {

  constructor(private triggerValidationService: TriggerValidationService) {}

  ngOnInit() {
    this.sub = this.triggerValidationService.triggerValidation$.subscribe(_ => {
      // trigger validation, e.g. this->formGroup.updateValueAndValidity();
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

简要回顾一下这是如何工作的：该指令附加到所有相关的输入元素（文本输入、文本区域、日期选择器、选择等），并监听我们想要用来触发验证的适当事件。然后该指令通知在可观察对象上发出的服务。托管表单的组件订阅该 observable 并在它发出时执行有效性检查。

重要提示：请注意，服务必须由托管表单的组件提供（注意providers组件装饰器中的部分），以便不同的表单不会触发彼此的验证。

推荐阅读