[英]Validate mat-autocomplete is object
I'm new in Angular.我是 Angular 的新手。 I have a form in html:
我在 html 中有一个表单:
<form class="input-form" [formGroup]='terminalsForm'>
<mat-form-field class="form-full-width">
<input matInput placeholder="From" [matAutocomplete]="auto" formControlName='terminalInput' required>
</mat-form-field>
<span>Your choice is: {{terminalsForm.get('terminalInput').value | json}}</span>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let terminal of (filteredTerminals)?.results" [value]="terminal">
<span>{{ terminal.name }}, {{terminal.city}}</span>
</mat-option>
</mat-autocomplete>
</form>
It works fine and span indicate me if I selected an object or not (it returns a json with id included if I autocomplited object).它工作正常,跨度指示我是否选择了一个对象(如果我自动编译对象,它返回一个包含 id 的 json)。 How can I validate this field with select required?
如何使用 select required 验证此字段? I need to pass terminal Id next so not selecting is supposed to be a validation error.
我接下来需要传递终端 ID,因此不选择应该是验证错误。 Thanks!
谢谢!
Updated on 24-01-2019更新于 24-01-2019
As per comments from @D.根据@D 的评论。 Make , custom validator function is needed in the
input
. 制作,
input
需要自定义验证器函数。
So, I have updated the code on stackblitz .所以,我已经更新了stackblitz上的代码。
I have added a new validator called forbiddenNamesValidator
, which allow users to enter names only from suggested values.我添加了一个名为
forbiddenNamesValidator
的新验证器,它允许用户仅根据建议值输入名称。 It's been added to myControl
like below:它已被添加到
myControl
如下所示:
autocomplete-simple-example.ts autocomplete-simple-example.ts
...
constructor() {
this.myControl.setValidators(forbiddenNamesValidator(this.options));
}
...
export function forbiddenNamesValidator(names: string[]): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
// below findIndex will check if control.value is equal to one of our options or not
const index = names.findIndex(name => {
return (new RegExp('\^' + name + '\$')).test(control.value);
});
return index < 0 ? { 'forbiddenNames': { value: control.value } } : null;
};
}
Ad in html, it's handled like below: html中的广告,处理如下:
...
<mat-error *ngIf="myControl.hasError('forbiddenNames')">
You should enter value from suggested one only. <strong>'{{myControl.errors.forbiddenNames.value}}'</strong> is not allowed.
</mat-error>
...
Original Answer原答案
To handle validation errors, you have to attach it to input[required]
inside mat-form-field
:要处理验证错误,您必须将其附加到
mat-form-field
内的input[required]
:
<mat-form-field class="form-full-width">
<input type="text" matInput placeholder="Terminals" formControlName="terminal" required [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let terminal of (filteredTerminals)?.results" [value]="terminal">
<span>{{ terminal.name }}, {{terminal.city}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
You can also check Angular Material Team's official example on stackblitz .您还可以在stackblitz上查看 Angular Material Team 的官方示例。
In my case, my autocomplete get data from the server-side (arrays of objects), so I've created this simple function that validates that the selected value is an object and different from null, with this is enough for me.在我的例子中,我的自动完成从服务器端(对象数组)获取数据,所以我创建了这个简单的函数来验证所选值是一个对象并且不同于 null,这对我来说已经足够了。
I hope that this can be useful for someone.我希望这对某人有用。
export function forbiddenObjectValidator(control: AbstractControl) {
return typeof control.value !== 'object' || control.value === null ? { 'forbiddenObject': true } : null;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.