I also have this issue.

let someObject = {
  foo: 'bar'
};

let group = this.formBuilder.group(someObject, {updateOn: 'blur'});

Here the FormBuilder just ignores passed options.

What's the recommended workaround? Not to use FormBuilder if you need these?

I've also noted that in the Form Builder - Group docs it mentions

Valid keys for the extra parameter map are validator and asyncValidator.

But in the FormControl docs it show that you can add the updateOn.

I assume this was missed when updateOn was added.

@vivainio

WORKAROUND
This works for me for now:

const controlConfig: {} = {};

// Loop through all fields and set default values and if field is required
fields.forEach(field => {
     controlConfig[field.key] = [field.value || '', { updateOn: 'blur', validators: field.validators || [] }];
});

return this.fb.group(controlConfig);

What should work though, but doesn't currently:

const controlConfig: {} = {};

// Loop through all fields and set default values and if field is required
fields.forEach(field => {
  controlConfig[field.key] = [field.value || '', field.validators || []];
});

return this.fb.group(controlConfig, { updateOn: 'blur' });

I had no luck with the workaround. I will wait for this to be resolved before using updateOn.

+1 for this feature. It's very inconvenient that we need to use FormControl constructors instead of FormBuilder to set validation onBlur.

+1 for this for consistency and ease of use.

+1 for this for consistency and ease of use as well.

For others looking for a work around until this is resolved, the code below works for us:

let myFormGroup = this.fb.group({
  control1: 'control 1 value',
  control2: 'control 2 value'
});

myFormGroup = new FormGroup(formGroupWithoutBlur.controls, { updateOn: 'blur' });

Same here

• 1. Same here

Is it the same issue if I want to have 2 validators like this:

this.newTransactionForm = this.fb.group({
 amount:              ['10', {Validators: [Validators.required,  Validators.min(1)],  updateOn: 'blur' }]
})

Would love to see this feature

Thank you, @dthomas722!

Just to clear up your snippet

let myFormGroup = this.formBuilder.group({
  control1: 'control 1 value',
  control2: 'control 2 value',
});
myFormGroup = new FormGroup(myFormGroup.controls, { updateOn: 'blur' });

or

const myFormGroup = new FormGroup(this.formBuilder.group({
  control1: 'control 1 value',
  control2: 'control 2 value',
}).controls, { updateOn: 'blur' });

will be great!!

@kara just to add more information to the bug, the solution as suggested by @LayZeeDK & @dthomas722 works when we use a default html control like input but the solution does not work when we have a custom form control being used. example below:

<my-text-edit [formControlName]="controlInfo.name" ></my-text-edit>

For some one looking for a workaround (Please correct me if my usage is incorrect for custom form control)

The work around is to not to have the [formControlName] on the template where custom control is called as shown above, but to have it inside the template of myTextEditComponent. Although this does not look nice because now i have to pass in the value by exposing another @input property which takes the value for the control. for example

template for myTextEditComponent

<input type="text" style="border: solid blue" [formControlName]="controlName" />

And the first code snippet changing to

<my-text-edit [controlName]="controlInfoProp.name" [controlData] = "controlInfoProp.data" >
</my-text-edit>

UPDATE
if we dont specify the [formControlName] on the usage of <my-text-edit>, then methods of controlValueAccessor are not called. There i ultimately ended up doing following

while calling <my-text-edit>

<div [formGroup]="formGroupRef">
    <my-text-edit [controlName]="controlInfoProp.name" [formGroupRef]="formGroupRef" [formControlName]="controlInfoProp.name" ></my-text-edit>
</div>

Template of myTextEditComponent

<div [formGroup]="formGroupRef">
    <input type="text" style="border: solid blue" [formControlName]="controlName" (input)="OnValChange($event.target.value)"/>
</div>

Thanks,

what's the status on this?

LGTM for api but let's wait until we branch off 7.0.x before we merge this.
⸻@IgorMinar in #24599

It is coming! 🙌 (version 7.1.0 at the earliest)

AbstractControlOptions (updateOn and others) will be supported in:

• FormBuilder#array
• FormBuilder#control
• FormBuilder#group

PR #24599 code has been merged. updateOn and the other AbstractControlOptions will be supported by FormBuilder in Angular 7.1.

@pkaushik23: @kara delivered the best talk on Angular Forms at AngularConnect 2017 where she shows how to avoid the anti-pattern of passing form groups down the component tree by injecting ControlContainer in the constructor of your custom control component.

You can now try out this feature in @angular/forms@7.1.0-beta.2.

@GaryBirges Try out your example in this StackBlitz:
https://stackblitz.com/edit/angular-formbuilder-update-on?file=app%2Ftransaction-form%2Ftransaction-form.component.ts

#24599 was released with @angular/forms@7.1.0 🎉

@kara You can close this issue.

@LayZeeDK Thanks for your help getting this fixed! Closing as done.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}