Question

好的，我有以下问题：
我有一个表单组和一些表单控件。这些表单控件使用updateOn: 'blur'设置更新模糊输入。现在按下提交按钮时工作正常，但是按Enter键提交表单时遇到问题。

这是一个复制问题的傻瓜：https://embed.plnkr.co/rMbRg85LK0MC6rUw99qG/

Answer 1

我遇到了这个，我最终做的是添加对我的提交按钮的引用，并且在（ngOnSubmit）中我将焦点更改为在运行我的搜索之前。

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

Answer 2

当用户在关注窗体控件元素时按下回车按钮时，不会触发模糊事件。但是，为什么要更新模糊的表单控件？你能告诉我们一些关于你想要实现的目标的代码吗？

Answer 3

试试这个

 <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>

Answer 4

另一个解决方法（因为原始解决方案在IE中不起作用）：

html：

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

控制器：

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

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

表格：

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

Answer 5

我放弃寻找解决此问题的优雅方法。我用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>

有关此问题的问题尚未解决：

Answer 6

updateOn 在模糊和提交方面不安全 %100。试试这个，

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 */
  });

使用updateOn：blur的formcontrol在提交

6 个答案: