尝试使用此条件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>
,
使用这种方式
<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,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,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>
,
尝试此解决方案。这可以帮助您解决问题。
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
谢谢
本文链接:https://www.f2er.com/3168895.html