- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我的 Angular 应用程序使用在服务器端执行的复杂验证。出于这个原因,我配置了仅在 blur 事件上触发更新和验证:
this.form = new FormGroup(
{ ... },
{
updateOn: 'blur'
}
);
除了使用自动完成的字段外,它工作得很好。如果自动完成功能打开并且用户用鼠标单击一个条目,则会发生一系列不幸的事件:
结果如下所示(简化示例)。文本字段中有一个有效值,但它被标记为错误,因为验证是在旧值上运行的。
从技术上讲,运行验证是正确的,因为单击自动完成弹出窗口会导致 blur 事件。但是,从 UI 的 Angular 来看,这是无稽之谈。当您完成该字段并转到下一个字段时,应该会进行验证。
那么如何防止模糊事件和早期验证呢?
我创建了一个简单的 StackBlitz example .它使用类似的设置,但在客户端运行验证(并检查文本是否以“ABC”开头)。要重现该问题,请输入“34”,然后使用鼠标从自动完成弹出窗口中选择“ABC34”。
最佳答案
为了触发字符更改,我们应该触发输入事件和自动完成更改事件,所以你可以尝试这样的事情:
在组件中:
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> </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();
您可以在您想要的每个事件中进行模糊处理,而不仅仅是在输入框外单击。希望这会有所帮助。
关于angular - 使用自动完成和 "updateOn: ' 模糊时防止提前验证'”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50999349/
我有一个应用程序,其中许多对象都扩展了一个抽象类,该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑,抽象类定义了默认
我正在使用$anchorScroll滚动到页面顶部,其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
我想停用我的应用程序中的右键单击,该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情? 最佳答案 右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
我使用 jquery 定位 div,在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
所以,我正在尝试复制 html5“占位符”属性功能。 我目前坚持的一件事是,在获得元素焦点时,插入符号立即出现在输入的开头。 就目前情况而言,插入符号出现在用户单击的位置,然后当我使用 jQuery
当表单填写并发送时,如果您刷新页面,它表示表单将再次发送。 (再次提交表格)。 防止这种情况发生的好方法是什么?或者终止这个 session ? 这方面有什么指导吗? 谢谢 最佳答案 处理完POST信
我想阻止 @ 被输入到 input 中。但它不起作用,知道为什么吗? $(function() { $(document).on('keyup', '[placeholder="x"]', fun
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误,我将如何“将查询分组在一起”,检查它是否会成功,然后对真实表进行实际影响。如果对表的实际更新失败,则恢复到更新之前的状
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例,我知道 eclipse 提供了一个反编译插件。而
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错,但是父元素的 ::after 是阻止选择:(
每当我编写需要大量条件的代码时,我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
我不确定术语是否正确,您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
我正在寻找一种简单的方法来检查多个零件表,以确定给定零件号在添加到给定表之前是否已经存在。 我目前想到的最好的想法是一个辅助表,它简单地将所有表中的每个 PN 列在一个列中,并带有一个唯一的键;但是我
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡,我会解释。 我有这个:
我有一个 Spring MVC web 应用程序(不确定该信息是否重要,但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。 字符串值的形式是: d@.
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗?我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么?我确实考虑过 bbcode,但发现如果没
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类),它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
我正在使用 Polymer 1.5,我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。 有没有一种方法可以通过重写实例变量的 __set
我是一名优秀的程序员,十分优秀!