Question

我正在尝试在Angular应用程序中验证电话号码。我有一个带有n输入字段的表单。我正在尝试以下操作，但收到以下错误。

无效的正则表达式：/ ^（？：+？（61））？？（？：（（（？=。*）））？（0？[2-57-8]））？？（dd（？：-|（？！dd [-]？d [-]））dd [-]？d [-]？d {3}）$ /：无重复

HTML

<div class="input-container">
<label for="mobile">Cell number*</label>
<input id="mobile" type="text" formControlName="mobile" size="10" placeholder="000 000 000">
</div>
<p class="error"*ngIf="!userFormGroup.get('mobile').valid && userFormGroup.get('mobile').dirty">
   * Invalid mobile number.
</p>

TS

mobile: new FormControl(null, [Validators.required, Validators.pattern('^(?:\+?(61))? ?(?:\((?=.*\)))?(0?[2-57-8])\)? ?(\d\d(?:[- ](?=\d{3})|(?!\d\d[- ]?\d[- ]))\d\d[- ]?\d[- ]?\d{3})$')])

我基本上需要验证输入的数字至少有10位，允许+字符，不包括空格

Answer 1

尝试使用此条件userFormGroup.get('mobile').hasError('pattern')

Stackblitz

RegEx

Validators.pattern('(([+][(]?[0-9]{1,3}[)]?)|([(]?[0-9]{4}[)]?))\s*[)]?[-\s\.]?[(]?[0-9]{1,3}[)]?([-\s\.]?[0-9]{3})([-\s\.]?[0-9]{3,4})')

模板

<p class="error" *ngIf="userFormGroup.get('mobile').invalid && (userFormGroup.get('mobile').dirty || userFormGroup.get('mobile').touched)">
    <ng-container *ngIf="userFormGroup.get('mobile').hasError('required')">
        mobile is Required!
    </ng-container>
    <ng-container *ngIf="userFormGroup.get('mobile').hasError('pattern')">
        * Invalid mobile number.
    </ng-container>
</p>

Answer 2

使用这种方式

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui segment" style="padding: 0px; overflow-x: scroll;">
    <table class="ui selectable single line compact table slide down visible transition">
        <thead class="">
            <tr class="left aligned">
                <th class="">Name</th>
                <th class="">Type</th>
                <th class="">Percent</th>
                <th class="">Value</th>
                <th class="">Max Value</th>
                <th class="">Begin Date</th>
                <th class="">Expired Date</th>
                <th class="">Selected Product?</th>
                <th class="">Priority</th>
                <th class="">ezPay Available?</th>
                <th class="">merchant Available?</th>
                <th class="">All Merchant?</th>
                <th class=""></th>
            </tr>
        </thead>
        <tbody class="">
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">fwfewfwe</td>
                <td class="">Default Test</td>
                <td class="">12</td>
                <td class="">0</td>
                <td class="">90000</td>
                <td class="">2019/10/26 15:05</td>
                <td class="">2019/10/26 15:05</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">123</td>
                <td class="">Default Test</td>
                <td class="">0</td>
                <td class="">69000</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:43</td>
                <td class="">2019/10/21 14:43</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">grgrb egeh</td>
                <td class="">Default Pulsa Rule Cashback</td>
                <td class="">0</td>
                <td class="">43545345</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:45</td>
                <td class="">2019/10/30 14:45</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

电话号码regular expression <span class="warning" *ngIf="userFormGroup.controls['mobile'].errors?.pattern"> * *Please insert a valid phone number</span>

Answer 3

尝试此解决方案。这可以帮助您解决问题。

HTML

<form>
 <div [formGroup]="userFormGroup">
  <label for="mobile">
  Mobile:
  <input id="mobile" type="number" formControlName="mobile" placeholder="1 000 000 000" required>
  </label>
  <p class="error"*ngIf="!userFormGroup.get('mobile').valid && userFormGroup.get('mobile').dirty">
     * Invalid mobile number.
  </p>
 </div>
</form>

TS

export class AppComponent  {
name = 'Angular';

userFormGroup = new FormGroup({
 mobile: new FormControl('', [Validators.required, Validators.pattern('^(\\+?\d{1,4}[\s-])?(?!0+\s+,?$)\\d{10}\s*,?$')] ),
 });
}

StackBlitz sample

谢谢

验证Angular中的电话号码

3 个答案: