[英]Angular 2 NgFor Pattern Error Message Not Showing
I'm trying to have inputs with a regex requirement in a ngFor loop but am not seeing the error message as expected when I put something that doesn't match the required pattern. 我试图在ngFor循环中输入具有正则表达式要求的输入,但是当我放入与所需模式不匹配的内容时,却没有看到预期的错误消息。
"Test" is never hidden and <div *ngIf="id?.hasError('pattern')">
never shows, even when I enter the wrong pattern. “测试”永远不会被隐藏,即使我输入了错误的模式,也不会显示
<div *ngIf="id?.hasError('pattern')">
。 I can see that the input fails because I'm using Material Design and the color of the line underlining the input changes to red but I do not see any changes in regards to the error messages. 我可以看到输入失败,因为我使用的是Material Design,并且输入下方的线条颜色变为红色,但是对于错误消息我看不到任何变化。
Here is my code at the moment: 这是我目前的代码:
(The keys pipe I have is a custom pipe because item is an object made of objects, so that breaks down the contained objects into key/value pairs.) (我拥有的键管道是自定义管道,因为item是由对象组成的对象,因此可以将包含的对象分解为键/值对。)
<div *ngFor="let item of items | keys">
<md-input-container>
<input
mdInput
placeholder={{item.placeholder}}
name={{item.name}}
pattern="\d{7}"
[(ngModel)]="item.currentValue"
#id="ngModel"
>
</md-input-container>
<div
[hidden]="id?.valid || id?.pristine"
>
<p>Test</p>
<div *ngIf="id?.hasError('pattern')">
Pattern should be xxxxxxx
</div>
</div>
</div>
尝试将name={{item.name}}
更改为name="id"
。
Try it in next way: 尝试以下方式:
<div *ngFor="let item of items | keys">
<md-input-container>
<input
mdInput
placeholder={{item.placeholder}}
name={{item.name}}
pattern="\d{7}"
[(ngModel)]="item.currentValue"
#id="ngModel"
>
</md-input-container>
<div [hidden]="!displayValid(id)">
<p>Test</p>
Pattern should be xxxxxxx
</div>
</div>
And this fun in .ts file of component: 而组件的.ts文件中的这种乐趣:
displayValid(inputRef: any): boolean {
let errors: any = inputRef.errors;
return errors && errors.pattern;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.