typescript 如何使用 Angular 6 中的模式验证印度手机号码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52403002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate indian mobile number using Pattern in Angular 6
提问by Zhu
As I mentioned in my title I am trying to validate the user entered mobile number is a indian number or not .
正如我在标题中提到的，我试图验证用户输入的手机号码是否为印度号码。
For that I have referred a pattern from this regular expression for Indian mobile numbers
为此，我从印度手机号码的正则表达式中引用了一个模式
But in my case it always returns false.
但在我的情况下，它总是返回 false。
I want to validate the following .
我想验证以下内容。
- number should starts with 6,7,8,9
- must have 10 digits
- 数字应以 6,7,8,9 开头
- 必须有 10 位数字
app.component.html
应用程序组件.html
<form class="example-form" [formGroup]="userAddressValidations">
<mat-form-field appearance="outline" class="col-sm-6">
<mat-label>10-digit Mobile Number</mat-label>
<input matInput formControlName="mobileNumber" maxlength="10" (keypress)=_keyPress($event)>
<mat-error *ngIf="userAddressValidations.get('mobileNumber').hasError('required')">
Please fill out this field.
</mat-error>
<mat-error *ngIf="userAddressValidations.get('mobileNumber').hasError('pattern')">
It is not a valid mobile number.
</mat-error>
</mat-form-field>
</form>
app.component.ts
app.component.ts
export class InputErrorStateMatcherExample {
userAddressValidations: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.userAddressValidations = this.formBuilder.group({
mobileNumber: ['', [Validators.required, Validators.pattern('^[6-9]\d{9}$')]]
});
}
_keyPress(event: any) {
const pattern = /[0-9]/;
let inputChar = String.fromCharCode(event.charCode);
if (!pattern.test(inputChar)) {
event.preventDefault();
}
}
}
Stackblitz : https://stackblitz.com/edit/angular-mat-form-validation-eg-4jag5u?file=app%2Finput-error-state-matcher-example.ts
can anyone help me to fix it.
谁能帮我修复它。
回答by Wiktor Stribi?ew
You may use
您可以使用
Validators.pattern('[6-9]\d{9}')
The ^and $are added automatically when the pattern is set with the help of a string literal. Alternatively, you may use a regex literal notation (then, ^and $are required):
在^与$图案时，设定用于字符串的帮助下被自动添加。或者，您可以使用正则表达式文字符号（然后，^并且$是必需的）：
Validators.pattern(/^[6-9]\d{9}$/)
Note that ^and $play no role in this concrete snippet since you limit the number of input chars with maxlength="10"attribute.
请注意，^并$在这个具体的片断不起任何作用，因为你限制与输入字符的数量maxlength="10"属性。
See the resulting regex demoand the updated Stackblitz demo.
