使用自动完成和“updateOn:'blur'”时防止早期验证

Posted

技术标签:

【中文标题】使用自动完成和“updateOn:\'blur\'”时防止早期验证【英文标题】:Prevent early validation when using autocomplete and "updateOn: 'blur'"使用自动完成和“updateOn:'blur'”时防止早期验证 【发布时间】:2018-12-02 14:31:28 【问题描述】:

我的 Angular 应用程序使用在服务器端执行的复杂验证。出于这个原因,我已配置更新和验证仅在 blur 事件上触发:

this.form = new FormGroup(
     ... ,
    
        updateOn: 'blur'
    
);

除了使用自动完成的字段外,它工作得很好。如果自动完成功能打开并且用户用鼠标单击条目,则会发生一系列不幸的事件:

触发了一个blur事件 使用不完整的旧值运行验证并添加错误 选定的自动完成值被放入字段中 自动完成弹出窗口关闭,字段再次获得焦点

结果如下所示(简化示例)。文本字段中有一个有效值,但它被标记为错误,因为验证是在旧值上运行的。

从技术上讲,运行验证是正确的,因为单击自动完成弹出窗口会导致 blur 事件。但是,从 UI 的角度来看,这是无稽之谈。当您完成该字段并进入下一个字段时,应该会进行验证。

那么如何防止 blur 事件和早期验证?

我创建了一个简单的StackBlitz example。它使用类似的设置,但在客户端运行验证(并检查文本是否以“ABC”开头)。要重现该问题,请输入“34”,然后用鼠标从自动完成弹出窗口中选择“ABC34”。

【问题讨论】:

【参考方案1】:

为了触发字符更改,我们应该触发输入事件和自动完成更改事件,所以你可以尝试这样的事情:

在组件中:

import  Component, OnInit , ViewChild , ElementRef from '@angular/core';
import  VERSION  from '@angular/material';
import  FormGroup, FormControl  from '@angular/forms';
import  Observable, Subject  from 'rxjs';
import  startWith, map  from 'rxjs/operators';

@Component(
  selector: 'material-app',
  templateUrl: 'app.component.html'
)
export class AppComponent implements OnInit 


  @ViewChild('textInput') textInput: ElementRef;  




  version = VERSION;
  form: FormGroup;
  abcText: string = 'ABC1';
  anyText: string = '';
  public readonly abcChanges: Subject<string> = new Subject<string>();
  public abcSuggestions: Observable<string[]>;

  ngOnInit() 
    this.form = new FormGroup(
      abcText: new FormControl(this.abcText),
      anyText: new FormControl(this.anyText)
    , 
        updateOn: 'blur'
      );

    this.form.valueChanges.subscribe(val => 
      this.validateData(val)

    );

    this.abcSuggestions = this.abcChanges.pipe(
      startWith(''),
      map(val => this.generateSuggestions(val))
    );
  

  private validateData(val: any) 
    console.log(val)
    // Would be more complex and happen on the server side
    const text: string = val['abcText'];
    const formControl = this.form.get('abcText');
    if (text.startsWith('ABC')) 
      formControl.setErrors(null);
     else 
      formControl.setErrors( abc: 'Must start with ABC' );
    
  

  private generateSuggestions(val: string) 
    let suggestions = [];
    if (!val.startsWith('ABC')) 
      suggestions.push('ABC' + val);
    
    suggestions.push('ABC1');
    suggestions.push('ABC2');
    suggestions.push('ABC3');
    return suggestions;
  

    validateOnCharacterChange(value) 
    console.log(value)
    const formControl = this.form.get('abcText');

    if (value.startsWith('ABC')) 
      formControl.setErrors(null);
     else 
      formControl.setErrors( abc: 'Must start with ABC' );
    
    // this.textInput.nativeElement.blur();
  

在 html 中:

<mat-toolbar color="primary">
    Angular Material 2 App
</mat-toolbar>
<div class="basic-container">
    <form [formGroup]="form" novalidate>
        <div>
            <mat-form-field>
                <input matInput [matAutocomplete]="auto" formControlName="abcText" (input)="abcChanges.next($event.target.value)" placeholder="Text starting with ABC" #textInput required (input)="validateOnCharacterChange($event.target.value)">
                <mat-error>Must start with 'ABC'</mat-error>
            </mat-form-field>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="validateOnCharacterChange($event.option.value)">
            <mat-option *ngFor="let val of abcSuggestions | async" [value]="val"> val </mat-option>
            </mat-autocomplete>
        </div>
    <div>&nbsp;</div>
    <div>
            <mat-form-field>
                <input matInput formControlName="anyText" placeholder="Any text">
                <mat-error></mat-error>
            </mat-form-field>
    </div>
    </form>
    <span class="version-info">Current build: version.full</span>
</div>

检查工作的stackblitz。

也可以通过使用this.textInput.nativeElement.blur(); 来模糊您想要的每个事件,而不仅仅是在输入之外单击。 希望这会有所帮助。

【讨论】:

感谢您的回答。但是对每个字符进行验证太昂贵了。在实际应用程序中,验证发生在服务器端,因此需要一些时间。这就是为什么我首先切换到updateOn: 'blur'。我不是在寻找更频繁的验证,而是更少的验证。 所以我认为在选择的选项上检查它就足够了,删除输入事件,这将是你想要的,我认为它不会太贵?! 是的,这可能是一种解决方法。有点遗憾的是,它在一小部分的一小部分内被检查了两次,并且快速闪烁红色;但它似乎正在工作。 @Codo 或者您可以模糊选择选项并检查自动验证。 我不确定我是否理解该解决方案。这应该如何工作并改进上述解决方法?

以上是关于使用自动完成和“updateOn:'blur'”时防止早期验证的主要内容,如果未能解决你的问题,请参考以下文章

Angular Material:不显示第二条验证消息

如何在使用 Jquery Autocomplete 和 JSP 时设置自动完成输入框的值

使用自动完成填充表单时,Javascript 不启用按钮

使用角形和镀铬禁用自动填充/自动完成

VSCode在自动完成功能时添加括号

CustomTextField - 自动完成/自动更正不会在点击时关闭