代码之家 › 专栏 › 技术社区 › Codo

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

angular-forms angular6 angular-material typescript angular

Codo · 技术社区 · 6 年前

我的Angular应用程序使用在服务器端执行的复杂验证。因此,我配置了更新和验证只在模糊事件:

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

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

一模糊事件已触发
验证以不完整的旧值运行并添加错误
所选的自动完成值将放入字段中
自动完成弹出窗口关闭,字段再次获得焦点

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

从技术上讲,运行验证是正确的,因为单击自动完成弹出窗口会导致模糊事件。然而,从用户界面的角度来看,这是胡说八道。验证应该在处理完字段并转到下一个字段时进行。

所以我怎样才能阻止模糊事件和早期验证?

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

1 回复 | 直到 6 年前

Lia 6 年前

为了在字符更改时触发,我们应该触发输入事件并自动完成更改事件,因此您可以尝试以下操作:

组件中:

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(); 你可以在任何需要的事件中模糊,而不仅仅是在输入之外单击。希望这有帮助。