javascript Angular 5 仅对模糊进行验证？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50103342/
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
Angular 5 solely validation on blur?
提问by timfrans
I wonder if it is possible to have the validation in reactive forms on blur. At the moment you can set updateOn: "blur"but then the values of the input fields won't update on input. In my case i need the values to be updated on every keystroke because I do calculations with it and show the result to the user. The validation should only happen on blur.
我想知道是否可以在模糊上以反应形式进行验证。目前您可以设置，updateOn: "blur"但输入字段的值不会在输入时更新。在我的情况下，我需要在每次击键时更新值，因为我用它进行计算并将结果显示给用户。验证应该只发生在模糊上。
thx.
谢谢。
EDIT:
编辑：
I use FormBuilder, some build in validators and some custom validators. Example code:
我使用 FormBuilder，一些内置验证器和一些自定义验证器。示例代码：
let formToMake = {
purpose: [null, Validators.required],
registrationDate: this.fb.group({
day: [null, Validators.required],
month: [null, Validators.required],
year: [null, Validators.required]
}),
isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};
If i would use the blur event i need to do all my validation manually, which i think is not a good way.
如果我要使用模糊事件，我需要手动进行所有验证，我认为这不是一个好方法。
回答by timfrans
What I eventually have done:
我最终做了什么：
Using reactive forms:
使用反应形式：
TS
TS
this is the form to make. I needed the productCost and loanAmount to be validated on blur but the values itself needed to update onchange. If you set updateOn: "blur"the validation happens after the blur event but als the values will update after the blur event.
这是要制作的表格。我需要在模糊时验证 productCost 和 LoanAmount，但值本身需要更新 onchange。如果您设置updateOn: "blur"验证发生在模糊事件之后，但值将在模糊事件之后更新。
let formToMake = {
productCost: new FormControl(null, {validators: Validators.required, updateOn: "blur"}),
loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: "blur"}),
loanLength: new FormControl(49, {validators: Validators.required, updateOn: "change"})
};
handleInput method:
句柄输入方法：
To solve this I just made an event handler which will be called on the input event.
为了解决这个问题，我刚刚创建了一个事件处理程序，它将在输入事件上被调用。
TS
TS
handleInput(e: any) {
this.loanAmount = e;
}
HTML
HTML
<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">
回答by mclem
I believe that you're looking for ng-binding on the Angular element. For example, you can bind to the keystrokes and blur like this for the input field:
我相信您正在寻找 Angular 元素上的 ng-binding。例如，您可以绑定到击键并像这样为输入字段模糊：
<input type=text (blur)="validate()" (keypress)="eventHandler($event)">
eventHandler(event) {
console.log(event, event.keyCode, event.keyIdentifier);
// Update value of string on every keystroke
}
validate() {
// Validation code goes here
}
You could also use ngModel and then you wouldn't have to worry about the keystroke at all because the string would automatically be updated for you. It would look something like this:
您也可以使用 ngModel，然后您根本不必担心击键，因为字符串会自动为您更新。它看起来像这样：
<input [(ngModel)]="name" (blur)="validate()">
name: string;
validate() {
// Validation code goes here
}
Since you're looking at using the Reactive Forms Module and their validation, you could do something like this:
由于您正在考虑使用 Reactive Forms Module 及其验证，因此您可以执行以下操作：
Template Approach
模板方法
<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">
<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">
The ngModel binding will change the input on every keystroke so you don't have to do it manually. I would really suggest taking this approach since this is what you're currently asking to do.
ngModel 绑定将更改每次击键时的输入，因此您不必手动执行此操作。我真的建议采用这种方法，因为这是您目前要求做的。
Reactive Forms Approach
反应式方法
this.nameForm = new FormGroup ({
firstname: new FormControl('', {
validators: Validators.required,
updateOn: 'submit'
}),
lastname: new FormControl('', {
validators: Validators.required,
updateOn: 'submit'
})
});
References: SO ApproachMedium Article
回答by Antonio de la mata
updateOn is only a property accesor method. Input HTML tag has a event bind named blur could used for that convenience.
updateOn 只是一个属性访问器方法。为方便起见，输入 HTML 标记有一个名为 blur 的事件绑定。
URL to official doc. https://angular.io/guide/user-input#on-blur
官方文档的 URL。 https://angular.io/guide/user-input#on-blur
