angular - 如何使用 Angular 自动完成验证输入
问题描述
我需要一些帮助。
我正在使用角度材料。
我的问题是关于使用自动完成时的 mat-error 显示/关闭。
在我的代码中,我有一个带有自动完成输入的表单。输入调用 JSON 对象作为响应。
{ name: 'Paul', id: 1 }
此时需要在输入中显示 [name],当在 select 选项上选择时。并将选项值设置为 [id]。
没问题,我已经解决了。
[displayWith]="displayFn"
没关系,一切正常,但我不知道如何将 [id] 验证为数字。每次我尝试它时,只需将输入 [name] 验证为字符串。
为什么我需要那个?所以,我将只使用 [id] 来构建表单对象 [ownerId]。
<input id="ownerId" type="text" matInput formControlName="ownerId" [matAutocomplete]="auto" placeholder="Digite para pesquisar..." name="doNotAutocomplete" autocomplete="doNotAutoComplete" required>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of owners" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
<mat-error>Selecione ou cadastre um novo proprietário.</mat-error>
// Set display owner name on input form - id on value
displayFn(owner: Owner): any {
return owner && owner.name ? owner.name : '';
}
// Horizontal Stepper form steps
this.formGroup = this.formBuilder.group({
formArray: this.formBuilder.array([
this.formBuilder.group({
ownerId: ['', [Validators.required],
code: ['', Validators.required],
agent: ['', Validators.required]
}),
当从输入中选择名称时,mat-error 正在设置输入 INVALID。
非常感谢您的帮助。
解决方案
我的解决方案,
在 Stackoverflow 中,我找到了一种解决方法:Angular Material:如何根据建议的选项验证自动完成功能?
所需要的很简单,我必须创建和自定义验证器功能,例如:
function ownerIdValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
if (typeof control.value === 'string') {
return { 'invalidAutocompleteObject': { value: control.value } };
}
return null; /* valid option selected */
};
}
并在此处添加:
this.formGroup = this.formBuilder.group({
formArray: this.formBuilder.array([
this.formBuilder.group({
ownerId: ['', [Validators.required, ownerIdValidator()]],
我希望它可以帮助别人。
推荐阅读
- django - 如何访问字典键作为 django 模板中列表索引的索引
- javascript - 已部署的 iOS React Native 应用程序中的空白图像
- reactjs - React 中的 Axios GET 请求
- python - 我怎样才能使它更有效率?Python DNA 生成器
- ruby-on-rails - rspec 期望会根据现有的其他期望而变化
- php - LOCK TABLES 会导致 InnoDB 中的死锁吗?
- javascript - 热门在 Meteor 中为自定义域上的 Graphlql 请求设置 HTTP 标头
- html - 如何让我的激活表单与相对位置一起使用?
- reactjs - reduce(prev,curr)函数在react redux中返回未定义
- powershell - 导出完整的 TFS 工作项,包括。PowerShell 的历史