typescript - 如何在 Angular 6 中使用模式验证印度手机号码

Question

正如我在标题中提到的，我正在尝试验证用户输入的手机号码是否是印度号码。

为此，我引用了这个 regular expression for Indian mobile numbers 中的一个模式

但在我的例子中，它总是返回 false。

我想验证以下内容。

• 数字应以 6,7,8,9 开头
• 必须有 10 位数字

app.component.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>

应用程序组件.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();

    }
}
}

堆栈 Blitz :https://stackblitz.com/edit/angular-mat-form-validation-eg-4jag5u?file=app%2Finput-error-state-matcher-example.ts

谁能帮我解决一下。

Answer 1

你可以使用

Validators.pattern('[6-9]\\d{9}')

^ 和 $ 是在字符串文字的帮助下设置模式时自动添加的。或者，您可以使用正则表达式文字表示法(然后，^ 和 $ 是必需的):

Validators.pattern(/^[6-9]\d{9}$/)

请注意，^ 和 $ 在此具体片段中不起作用，因为您使用 maxlength="10" 限制了输入字符的数量属性。

参见 resulting regex demo和 updated Stackblitz demo .