feat(forms): add updateOn blur option to FormControls (#18408)
By default, the value and validation status of a `FormControl` updates whenever its value changes. If an application has heavy validation requirements, updating on every text change can sometimes be too expensive. This commit introduces a new option that improves performance by delaying form control updates until the "blur" event. To use it, set the `updateOn` option to `blur` when instantiating the `FormControl`. ```ts // example without validators const c = new FormControl(, { updateOn: blur }); // example with validators const c= new FormControl(, { validators: Validators.required, updateOn: blur }); ``` Like in AngularJS, setting `updateOn` to `blur` will delay the update of the value as well as the validation status. Updating value and validity together keeps the system easy to reason about, as the two will always be in sync. It's also worth noting that the value/validation pipeline does still run when the form is initialized (in order to support initial values). Closes #7113
This commit is contained in:
@ -76,7 +76,27 @@ export function main() {
|
||||
|
||||
});
|
||||
|
||||
describe('updateOn', () => {
|
||||
|
||||
it('should default to on change', () => {
|
||||
const c = new FormControl('');
|
||||
expect(c._updateOn).toEqual('change');
|
||||
});
|
||||
|
||||
it('should default to on change with an options obj', () => {
|
||||
const c = new FormControl('', {validators: Validators.required});
|
||||
expect(c._updateOn).toEqual('change');
|
||||
});
|
||||
|
||||
it('should set updateOn when updating on blur', () => {
|
||||
const c = new FormControl('', {updateOn: 'blur'});
|
||||
expect(c._updateOn).toEqual('blur');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('validator', () => {
|
||||
|
||||
it('should run validator with the initial value', () => {
|
||||
const c = new FormControl('value', Validators.required);
|
||||
expect(c.valid).toEqual(true);
|
||||
|
Reference in New Issue
Block a user