CODEWITHSUNDEEP
angularvalidationangular-forms
Serge Bekenkamp
Serge Bekenkamp

Reputation: 426

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

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/

Upvotes: 4

Views: 11513

Answers (6)

Tuba Salçi
Tuba Salçi

Reputation: 351

updateOn not safe %100 when it comes to blur and submit. Try this,

this.controls = data.map(entity => {
    return {"data": entity, "formGroup": new FormGroup({
      yourFormName: new FormControl( entity.yourFormName/* CAME FROM DB OR  ARRAY */ )
    }, {updateOn: "change"})}; /* important part here is CHANGE */
  });

Upvotes: 1

a5tr0
a5tr0

Reputation: 633

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>

Issues is open about that:

Upvotes: 0

Felix
Felix

Reputation: 4595

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'}]
})

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27471

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>

Upvotes: 0

Jake A.
Jake A.

Reputation: 71

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>

Upvotes: 6

Taylor LaMar
Taylor LaMar

Reputation: 75

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?

Upvotes: 0

Related Questions