Angular 6 Reactive表单-触发焦点/模糊验证

Question

如何在blur/focus-in/change上激发验证消息？

我尝试过的：

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
}] 
});
}

但它不起作用。。

Answer 1

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

指令如下：

@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();
}
}

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

重要信息：请注意，服务必须由承载表单的组件提供(请注意组件装饰器中的providers部分(，这样不同的表单就不会触发彼此的验证。

Answer 2

您可以在表单中使用模板驱动验证，而不是使用反应式表单验证。以下是相同的示例：

<div class="group input-group input-group-sm has-feedback" [ngClass]="{'has-success' : contact_name.valid && contact_name.touched,'has-error' : contact_name.invalid && contact_name.touched}">
<div class="font-icn input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="number" min="0" class="input_k" name="contact_name" id="contact_name" [value]="contactForm.contact_name"
[(ngModel)]="contactForm.contact_name" #contact_name="ngModel" >
<label for="contact_name" [ngClass]="{'active' : contactForm.contact_name != ''  }">Enter Contact Form</label>
<span aria-hidden="true" class="fa form-control-feedback" [ngClass]="{'fa-check': contact_name.valid && contact_name.touched,'fa-remove' : contact_name.invalid && contact_name.touched}"></span>
<div class="help-block" *ngIf="contact_name.invalid && contact_name.touched">Please select contact form.</div>
</div>   

Answer 3

我从表单上的输入元素中观察模糊事件。然后我将valueChanges和模糊可观测值合并，如下所示：

ngAfterViewInit(): void {
// Watch for the blur event from any input element on the form.
// This is required because the valueChanges does not provide notification on blur
const controlBlurs: Observable<any>[] = this.formInputElements
.map((formControl: ElementRef) => fromEvent(formControl.nativeElement, 'blur'));
// Merge the blur event observable with the valueChanges observable
// so we only need to subscribe once.
merge(this.productForm.valueChanges, ...controlBlurs).pipe(
debounceTime(800)
).subscribe(value => {
this.displayMessage = this.genericValidator.processMessages(this.productForm);
});
}

我在这里有一个完整的例子：https://github.com/DeborahK/Angular-ReactiveForms/tree/master/APM