Angular Reactive Forms:如何显示错误+红色边框?
Angular Reactive Forms: How to display an error+red border?
我开始使用 Angular 响应式表单。
我真的很喜欢能够拥有异步验证器的想法(对于必须针对数据库进行检查的事情),我喜欢 GUI 不需要知道每条规则的想法。
所以我有一个虚拟登录表单:
loginForm = this.formBuilder.group({
email: new FormControl(
'',
Validators.compose([Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
),
password: new FormControl(
'',
Validators.compose([Validators.required, Validators.minLength(8)]
)),
});
和匹配的视图:
<form class="ion-margin" [formGroup]="loginForm" (ngSubmit)="login()">
<ion-item lines="none">
<ion-label position="floating">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-row class="ion-margin">
<ion-button type="submit" color="success" expand="block" [disabled]="loginForm.dirty && !loginForm.valid">Sign in</ion-button>
</ion-row>
</form>
目前,我看不出用户无法提交表单的原因。以前我在做一些 ASP.Net 核心项目,并且有同样的方法在 ViewModel/Controller 端声明模型及其验证规则。
- 我有点期待,因为 ion-input 知道它的表单控件名称,如果验证失败,至少可以自动添加某种红色边框。正常吗?我错过了什么吗?
- 有没有办法提供
.ts
文件中的错误消息?我的意思是,ViewModel 和 View 必须了解每个错误(及其参数(如最小长度)),这有点奇怪,如果有错误,验证器是否有责任提供错误?
- 如果我遇到一些全局错误怎么办(例如,用户名-密码组合无效,我可以使用表单提供此信息,还是应该在其他地方管理此信息?
很抱歉将 3 个问题合二为一,但这是同一个例子,而且非常接近。
我在 ionic 应用程序中处理多个验证消息的方式..
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<div *ngFor="let validation of validation_messages.email">
<div class="error-message" *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').touched || loginForm.get('email').dirty)">
{{ validation.message }}
</div>
</div>
在控制器文件中根据您的字段和验证进行配置。
this.validation_messages = {
'email': [
{ type: 'required', message: 'Email is required' }
],
'password': [
{ type: 'pattern', message: 'Password does not match pattern' }
]
};
此方法将处理单个字段上的多个验证消息。
- 错误边框 - 如果出现错误,Ionic 会在字段底部显示一条红线。尝试从
ion-item
中删除 lines="none"
- 全局错误 - 通过以上设置,您可以在页面底部定义全局错误,只需添加另一个 div 即可显示来自相同 validation_messages.
的错误
我开始使用 Angular 响应式表单。
我真的很喜欢能够拥有异步验证器的想法(对于必须针对数据库进行检查的事情),我喜欢 GUI 不需要知道每条规则的想法。
所以我有一个虚拟登录表单:
loginForm = this.formBuilder.group({
email: new FormControl(
'',
Validators.compose([Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
),
password: new FormControl(
'',
Validators.compose([Validators.required, Validators.minLength(8)]
)),
});
和匹配的视图:
<form class="ion-margin" [formGroup]="loginForm" (ngSubmit)="login()">
<ion-item lines="none">
<ion-label position="floating">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-row class="ion-margin">
<ion-button type="submit" color="success" expand="block" [disabled]="loginForm.dirty && !loginForm.valid">Sign in</ion-button>
</ion-row>
</form>
目前,我看不出用户无法提交表单的原因。以前我在做一些 ASP.Net 核心项目,并且有同样的方法在 ViewModel/Controller 端声明模型及其验证规则。
- 我有点期待,因为 ion-input 知道它的表单控件名称,如果验证失败,至少可以自动添加某种红色边框。正常吗?我错过了什么吗?
- 有没有办法提供
.ts
文件中的错误消息?我的意思是,ViewModel 和 View 必须了解每个错误(及其参数(如最小长度)),这有点奇怪,如果有错误,验证器是否有责任提供错误? - 如果我遇到一些全局错误怎么办(例如,用户名-密码组合无效,我可以使用表单提供此信息,还是应该在其他地方管理此信息?
很抱歉将 3 个问题合二为一,但这是同一个例子,而且非常接近。
我在 ionic 应用程序中处理多个验证消息的方式..
<ion-item>
<ion-label position="floating">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<div *ngFor="let validation of validation_messages.email">
<div class="error-message" *ngIf="loginForm.get('email').hasError(validation.type) && (loginForm.get('email').touched || loginForm.get('email').dirty)">
{{ validation.message }}
</div>
</div>
在控制器文件中根据您的字段和验证进行配置。
this.validation_messages = {
'email': [
{ type: 'required', message: 'Email is required' }
],
'password': [
{ type: 'pattern', message: 'Password does not match pattern' }
]
};
此方法将处理单个字段上的多个验证消息。
- 错误边框 - 如果出现错误,Ionic 会在字段底部显示一条红线。尝试从
ion-item
中删除 - 全局错误 - 通过以上设置,您可以在页面底部定义全局错误,只需添加另一个 div 即可显示来自相同 validation_messages. 的错误
lines="none"