[英]Error messages according to the validation patterns in Angular
您可以在md-error
使用相同的模式表达式,并将它们分成两个不同的div
-elements,一个与另一个匹配
编辑测试myselv后,我发现,你需要使用从打字稿一个regepx(至少这就是我如何使它工作)来执行匹配
在您的组件中,定义您的正则表达式
emptyRegExp = new RegExp(/[^ +]/);
letterNumberRegExp = new RegExp(/^[ +|a-zA-Z0-9]+$/);
然后在html中使用这些表达式来显示所需的错误消息。
<md-error *ngIf="locaCd.errors?.pattern">
<div *ngIf="emptyRegExp.exec(locaCd?.value)"> Blank is unacceptable.</div>
<div *ngIf="letterNumberRegExp.exec(locaCd?.value))">Must be filled by a~z,A~Z or number.</div>
</md-error>
默认情况下, Validators.pattern()
接受参数作为pattern: string | RegExp
pattern: string | RegExp
因此我会更好地建议您创建自定义验证,该验证处理单个方法可以为您动态处理的方法。
例如demo.component.ts
import { FormGroup, FormControl, Validators, ValidatorFn } from '@angular/forms';
this.form = new FormGroup({
email: new FormControl('', [
this.customPatternValid({ pattern: /[A-Z]/, msg: 'Small characters not allowed' }),
this.customPatternValid({ pattern: /^([^0-9]*)$/, msg: 'Numbers is not allowed' })
]),
password: new FormControl('', [
Validators.required
])
});
// Create our customPatternValid function
public customPatternValid(config: any): ValidatorFn {
return (control: FormControl) => {
let urlRegEx: RegExp = config.pattern;
if (control.value && !control.value.match(urlRegEx)) {
return {
invalidMsg: config.msg
};
} else {
return null;
}
};
}
例如demo.component.html
<form [formGroup]="form">
<input type="email" placeholder="Email" formControlName="email"/>
<div *ngIf="!form.controls.email.valid && (form.controls.email.dirty ||form.controls.email.touched)" class="error">
<div *ngIf="form.controls.email.errors.invalidMsg">
{{form.controls.email.errors.invalidMsg}}
</div>
</div>
</form>
这是ValidatorFn
,它将验证委托给Validators.pattern
但在验证错误时返回一个带有message
键的对象。
const patternWithMessage = (pattern: string | RegExp, message: string): ValidatorFn => {
const delegateFn = Validators.pattern(pattern)
return control => delegateFn(control) === null ? null : { message }
}
有了这个,模板可以显示验证错误message
值。
例如patternWithMessage(/^[a-zA-Z_][a-zA-Z_0-9]*$/, 'Invalid value for key')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.