[英]Error messages according to the validation patterns in Angular
I would like to divide the error messages according to the validation patterns,for example, in below, there are 2 patterns我想根据验证模式来划分错误消息,例如,在下面,有 2 种模式
Validators.pattern(/[^ +]/), Validators.pattern(/^[ +|a-zA-Z0-9]+$/),
but only one message can be set.但只能设置一条消息。
<md-error *ngIf="locaCd.errors?.pattern"> onny blank is unacceptable AND must be filled by a~z,A~Z or number. </md-error>
Is there anyway to divide into each witout making CustomValidation??无论如何要分成每个不制作CustomValidation??
You could use the same pattern expression inside your md-error
, and separate them into two different div
-elements, matching one and the other 您可以在md-error
使用相同的模式表达式,并将它们分成两个不同的div
-elements,一个与另一个匹配
EDIT after testing myselv, I found that you need to execute the matching using a regepx from typescript (at least thats how I made it work) 编辑测试myselv后,我发现,你需要使用从打字稿一个regepx(至少这就是我如何使它工作)来执行匹配
in your component, define yout regexp 在您的组件中,定义您的正则表达式
emptyRegExp = new RegExp(/[^ +]/);
letterNumberRegExp = new RegExp(/^[ +|a-zA-Z0-9]+$/);
then use those expressions in your html to display the desired error message. 然后在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>
By default Validators.pattern()
accepts parameter as pattern: string | RegExp
默认情况下, Validators.pattern()
接受参数作为pattern: string | RegExp
pattern: string | RegExp
so i will better suggest you to create you custom validation which handle a single method can handle dynamically for you. pattern: string | RegExp
因此我会更好地建议您创建自定义验证,该验证处理单个方法可以为您动态处理的方法。
For example demo.component.ts
例如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;
}
};
}
For example demo.component.html
例如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>
Here is ValidatorFn
that delegates validation to Validators.pattern
but returns an object with message
key on validation error.这是ValidatorFn
,它将验证委托给Validators.pattern
但在验证错误时返回一个带有message
键的对象。
const patternWithMessage = (pattern: string | RegExp, message: string): ValidatorFn => {
const delegateFn = Validators.pattern(pattern)
return control => delegateFn(control) === null ? null : { message }
}
With this, template can show value of message
on validation error.有了这个,模板可以显示验证错误message
值。
eg patternWithMessage(/^[a-zA-Z_][a-zA-Z_0-9]*$/, 'Invalid value for key')
例如patternWithMessage(/^[a-zA-Z_][a-zA-Z_0-9]*$/, 'Invalid value for key')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.