formcontrol with updateOn: blur doesn't update values when submitting

Related searches

Ok so I'm having the following issue: I have a form with a form group and a few form controls. these form controls update on blurring the input with the updateOn: 'blur' setting. Now this works fine when pressing the submit button however I run into issues when submitting the form by pressing enter.

Here's a plunkr reproducing the issue: https://embed.plnkr.co/rMbRg85LK0MC6rUw99qG/

I ran into this and what i ended up doing was adding a reference to my submit button and in the (ngOnSubmit) i changed focus to that before running my search.

<form [formGroup]="form" (ngSubmit)="submit.focus(); search();" novalidate>
  <button type="submit" class="btn btn-primary" #submit [disabled]="form.invalid || isLoading">
</form>

Boosting Performance With The New updateOn Option in Angular v5 , To use it with Reactive Forms, we need to set the updateOn option to blur or submit when we instantiate a new FormControl ( the default option� this.email = new FormControl(null, {validators: Validators.required, updateOn: 'blur'}); When working with FormGroup or FormArray we can use it to set the default updateOn values for all the form's child controls.

The blur event is not triggered when a user presses the enter button while focused on a form control element. Though, why are you updating form controls on blur? Could you show us some code as to what you're trying to achieve?

formcontrol with updateOn: blur doesn't update , I ran into this and what i ended up doing was adding a reference to my submit button and in the (ngOnSubmit) i changed focus to that before� content_copy const control = new FormControl ('', {validators: Validators. required, asyncValidators: myAsyncValidator }); Configure the control to update on a blur eventlink. Set the updateOn option to 'blur' to update on the blur event.

try this

 <div>
  <form (ngSubmit)="onSubmit(f)"  #f="ngForm" [formGroup]="emailForm" noValidate>
    <input type="email" formControlName="email" ><br>
    Submitted: {{ value | json}}
    <br>
    <button>Submit</button>
  </form>
</div>

FormControl updateOn blur mode not working properly only for , I signed that CLA but won't resolve. It maybe due to git.config settings on my system vs git account email/name. But you can bypass this behavior using the updateOn: 'blur' and updateOn: 'submit' option. So, the first one in our backpack is the updateOn: 'blur' option. Applying this will make the value of a Form Control subject to change with the blur event of a native input element associated with it. Take the following code example,

Another workaround (because original solution does not work in IE):

html:

<input matInput type="text" id="field" #field
                     (blur)="update('field', field)" />

controller:

update(controlName, input): void {
    const control = this.form.get(controlName);

    if (control instanceof FormControl) {
      control.setValue(input.value);
      control.markAsTouched();
      control.updateValueAndValidity({ emitEvent: true });
    }
}

form:

this.form = this.fb.group({
  'field': ['some value', { updateOn: 'submit'}]
})

{ updateOn: 'submit' } doesn't work when using with FormBuilder's , As the documentation states: when using the { updateOn: 'submit' } , values of the FormControl s should only update when a submit event on� As the documentation states: when using the { updateOn: 'submit' }, values of the FormControls should only update when a submit event on the parent FormGroup is fired. This works well when you use a new instance of FormGroup .

I give up to find elegant solution to this problem. Theres my fix with ngxs form :

 onSubmit() {

    // fix for when blur is not call
    setTimeout( () => { 
      this.scrollFocus('#btnSoumission'); // also fix for when blur is not call
      // rest is for validation 
      this.formErrors = {};
      const telephoneErrors = (this.formCallMe as FormGroup).controls['phone'].errors;

      if (telephoneErrors) {
        this.formErrors = { ...this.formErrors, phone: phoneErrors };
        this._changeDetection.detectChanges();
        this.scrollFocus('#coordonnees-box-errors'); // yes jsut imagine it's exist in the html code ...

      } else if (this.formCallMe.valid) {
        this._store.dispatch(new SubmitForm(this.formCallMe.value));
      }
    }, 1);
  }
  
scrollFocus(selector: string, event?: Event) {

  if (event) {
    event.preventDefault();
  }
  const refHTMLELement = document.querySelector(selector);
  (refHTMLELement as HTMLElement).focus();
  refHTMLELement.scrollIntoView({ behavior: 'auto', block: 'start' });
}
<form [formGroup]="formCallMe" ngxsForm="formCallMeState" ngxsFormDebounce="0" (ngSubmit)="onSubmit()">

  <!-- imagine you see here full of beautiful html code to display error and be accessible etc ... -->
  
  First name: <input class="form-control" type="text" id="input-prenom" formControlName="prenom" /><br/>
  
  Last name: <input class="form-control" type="text" id="input-nom" formControlName="nom" /><br/> 
  
  Phone : <input class="form-control" type="tel" id="input-telephone"
    formControlName="phone" /><br/>
    
<button id="btnSoumission" class="btn btn-primary" type="submit" translate>Please feed me</button>
</form>

Dynamically changing of Angular updateOn option and validation , The same goes for “blur” and “change”. However There are setValue and patchValue methods for FormGroup and FormControl. But they� For a FormControl, the current value. For an enabled FormGroup, the values of enabled controls as an object with a key-value pair for each member of the group. For a disabled FormGroup, the values of all controls as an object with a key-value pair for each member of the group. For a FormArray, the values of enabled controls as an array.

I would like to start the validation of the fields of my forms only when the user leave the field (onblur). I'm trying in this way: this.profileForm = this.fb.group({ firstNam

Set the updateOn property for all controls in a form grouplink. The options object is used to set a default value for each child control's updateOn property. If you set updateOn to 'blur' at the group level, all child controls default to 'blur', unless the child has explicitly specified a different updateOn value.

Angular automatically mirrors many control properties onto the form control element as CSS classes. You can use these classes to style form control elements according to the state of the form. The following classes are currently supported..ng-valid.ng-invalid.ng-pending.ng-pristine.ng-dirty.ng-untouched.ng-touched

Comments
  • This solution does not work in IE11 for me. Chrome is OK.
  • I don't particularly care about updating the form controls on blur. I just want the validation only to trigger / show on blur / submit. and while formcontrols give you the option to update the value on either submit or onblur you cannot seem to combine the 2