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.
thx.
EDIT:
I use FormBuilder, some build in validators and some custom validators. Example code:
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.
What I eventually have done:
Using reactive forms:
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.
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
handleInput(e: any) {
this.loanAmount = e;
}
HTML
<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">