javascript 如何为 FormGroup 触发 Angular 5 异步验证器 onblur
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47193269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fire Angular 5 async validator onblur for FormGroup
提问by BSimpson
I am using Angular version 5.0.1 and I'm trying to fire an AsyncValidatoron a FormGroupon a blur event on one of the FormControlsin the FormGroup.
我采用了棱角分明的版本5.0.1，我试图触发一个AsyncValidator上FormGroup上的一个上一个模糊事件FormControls中FormGroup。
I can get onBlurto work on a form control using the following:
我可以onBlur使用以下方法处理表单控件：
name: ['', {updateOn: 'blur'}]
However, when I try to apply it to a FormGroupit doesn't work.
但是，当我尝试将其应用于 a 时，FormGroup它不起作用。
Is it possible to only fire an AsyncValidator onBluron a FormGroup, and if not, what is the best way to execute the validator only when the user has finished entering data?
是否可以只AsyncValidator onBlur在 a 上触发FormGroup，如果不能，只有在用户完成输入数据时才执行验证器的最佳方法是什么？
My only other option at the moment is to us some sort of debounce wrapper for my validator.
目前我唯一的其他选择是为我们的验证器提供某种去抖动包装器。
Just reading through hereand it appears I should be able to use updateOn: 'blur'for a form group.
只是通读这里，看来我应该能够updateOn: 'blur'用于表单组。
After new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
在 new FormGroup(value, {updateOn: 'blur'})) 之后；new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
回答by vts
In Angular5Specifying the update mode is possible for both types of forms: template-driven formsand reactive forms.
在Angular5指定更新模式对于两种类型的表单都是可能的：template-driven forms和reactive forms。
First one is working for you. Here's the working example for reactive forms
第一个是为你工作。这是反应形式的工作示例
Component.ts
组件.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'form01',
templateUrl: './student.component.html',
styleUrls: ['./student.component.scss']
})
export class StudentComponent implements OnInit {
formTitle:string="Student registration ";
nameForm: FormGroup;
constructor() {
}
ngOnInit() {
this.nameForm = new FormGroup ({
firstname: new FormControl('', {
validators: Validators.required,
asyncValidators: [yourAsyncValidatorFunction],
updateOn: 'blur'
}),
lastname: new FormControl('', {
validators: Validators.required,
asyncValidators: [yourAsyncValidatorFunction],
updateOn: 'blur'
})
});
}
}
HTML
HTML
<form [formGroup]="nameForm" novalidate>
<div class="form-group">
<label>What's your first name? </label>
<input class="form-control" formControlName="firstname">
</div>
<div class="form-group">
<label>What's your last name?</label>
<input class="form-control" formControlName="lastname">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<h3>Hello {{nameForm.value.firstname}} {{nameForm.value.lastname}}</h3>
回答by Niels Steenbeek
It works on my side. Be aware that the FormBuilder may not support this yet.
它对我有用。请注意，FormBuilder 可能尚不支持此功能。
this.formGroup = new FormGroup({
name: new FormControl('', {validators: []})
}, {
updateOn: 'blur'
});
回答by Eduardo Eljaiek
I use this code snippetcombining AbstractControlOptionswith FormBuilder:
我使用此代码段结合AbstractControlOptions有FormBuilder：
constructor(private formBuilder: FormBuilder) { }
this.signUpForm = new FormGroup( this.formBuilder.group({
'email': ['', ValidationUtils.emailValidators()],
'fullname': ['', ValidationUtils.fullnameValidators()],
'idCard': ['', ValidationUtils.idCardValidators()],
'username': {value: '', disabled: true}
}).controls, {
updateOn: 'blur',
});
回答by Mostafa Ahmed
you can add this directive
你可以添加这个指令
import { Directive,Output, HostListener, EventEmitter } from '@angular/core';
@Directive({
selector: '[onBlur]'
})
export class OnBlurDirective {
// @Input('onBlur') onBlurFunction: Function;
@Output('onBlur') onBlurEvent: EventEmitter<any> = new EventEmitter();
constructor() { }
@HostListener('focusout', ['$event.target'])
onFocusout(target) {
console.log("Focus out called");
this.onBlurEvent.emit()
}
}
and use it in the HTML like this
并像这样在 HTML 中使用它
<input type="text" (onBlur)="myFunction()"/>
and in the component you can define the function myFunctionas you want
而在组件，您可以定义函数myFunction的，只要你想
