我在模板中添加了模式属性
<input class="form-control" type="text" id="elementName"
[(ngModel)]="elementName" name="elementName"
(input)="onElementNameChanged()" #name="ngModel" required pattern="[A-Za-z0-9_)*\S]*" >
如果输入不正确,如何添加要显示的消息?
类似的东西行不通:
<div [hidden]="!name.errors.pattern"
class="alert alert-danger">
Name must match pattern
</div>
我强烈建议您使用ReactiveForms
而不是TemplateDrivenForms
因为它们非常适合管理验证模式和消息。
一个 HTML 片段示例:
<form novalidate [formGroup]="user" (ngSubmit)="onSubmit()">
<div formGroupName="account">
<md-input-container>
<input md-input type="text" placeholder="{{'USER.EMAIL' | translate}} *" formControlName="email" autocomplete="off">
<md-hint class="error" *ngIf="user.get('account.email').hasError('required') && user.get('account.email').touched">
{{'VALIDATOR.EMAIL_RQ' | translate}}
</md-hint>
<md-hint class="error" *ngIf="user.get('account.email').hasError('pattern') && user.get('account.email').touched">
{{'VALIDATOR.WRONG_EMAIL' | translate}}
</md-hint>
</md-input-container>
<md-input-container>
<input md-input type="password" placeholder="{{'USER.PASSWORD' | translate}} *" minlength="6" formControlName="password" autocomplete="off">
<md-hint class="error" *ngIf="user.get('account.password').hasError('required') && user.get('account.password').touched">
{{'VALIDATOR.PWD_RQ' | translate}}
</md-hint>
</md-input-container>
</div>
<button md-raised-button [disabled]="!user.valid || submitted" color="accent" type="submit" class="submit-button">
{{'LOGIN.BUTTON' | translate}}
</button>
</form>
这个 HTML 示例显示了一个带有验证的登录表单。请注意仅当表单在特定字段上出现验证错误时md-hint
元素如何显示。
您实际上可以设置一个接口来匹配您的ReactiveForm
. 这是链接到示例的界面:
export interface Account {
account: {
email: string;
password: string;
}
}
TypeScript 示例片段:
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { EmailRegex } from 'app/shared/shared.interface'; // Imported regex for validator
...
user: FormGroup;
ngOnInit() {
...
// Init your reactive form
this.user = this.formBuilder.group({
account: this.formBuilder.group({
email: ['', [Validators.required, Validators.pattern(EmailRegex)]],
password: ['', Validators.required]
})
});
}
请注意表单组如何与界面匹配。此外,可以在此设置表单值,如果你想,但你可以看到我的领域email
,并password
设定一个空字符串值。请注意,您还可以在链接到该字段的数组中添加任意数量的验证器。
然后,您可以submit()
直接从您的主要访问您的表单值FormGroup
:
this.user.value.account.email
如果这个例子还不够好,我强烈建议你阅读 Todd Motto 的指南,ReactiveForms
里面有很好的解释:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句