[英]How to validade an input with Angular Autocomplete
I need some help.我需要帮助。
I'm using Angular Material.我正在使用角材料。
My issue is about the mat-error show/off when using autocomplete.我的问题是关于使用自动完成时的 mat-error 显示/关闭。
In my code, I have a form with an autocomplete input.在我的代码中,我有一个带有自动完成输入的表单。 The input calls a JSON object as a response.
输入调用 JSON 对象作为响应。
{ name: 'Paul', id: 1 }
At this point a need to show [name], when selected on the select option, in the input.此时,需要在“选择”选项上选择时显示[名称],在输入中选择。 And set the option value to [id].
并将选项值设置为 [id]。
No problem, I've done with.没问题,我已经完成了。
[displayWith]="displayFn"
[displayWith]="displayFn"
That's ok, everything works as should, but I don't know how to validate the [id] as a number.没关系,一切正常,但我不知道如何将 [id] 验证为数字。 Every time I've tried it just validate the input [name] as a string.
每次我尝试时,只需将输入 [name] 验证为字符串。
Why I need that?为什么我需要那个? So, I will use just the [id] to build the form object [ownerId].
因此,我将仅使用 [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] }),
The mat-error is setting the input INVALID when the name is selected from the input.当从输入中选择名称时,mat-error 会设置输入 INVALID。
Many thanks for any help.非常感谢您的帮助。
My Solution,我的解决方案,
Here in Stackoverflow, I have found a solution approach: Angular Material: How to validate Autocomplete against suggested options?在 Stackoverflow 中,我找到了一种解决方案:Angular Material: 如何根据建议的选项验证自动完成?
What was needed is simple, I had to create and custom validator function such as:需要的很简单,我必须创建和自定义验证器函数,例如:
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 */
};
}
And added here:并在此处添加:
this.formGroup = this.formBuilder.group({
formArray: this.formBuilder.array([
this.formBuilder.group({
ownerId: ['', [Validators.required, ownerIdValidator()]],
I hope it could help someone else.我希望它可以帮助别人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.