Angular 5 个响应式表单模式验证器

Question

我需要使用 Validators.pattern 在 Reactive Form (Form Control) 中想出一个验证模式。条件是字母数字，只允许使用下划线_、连字符-。不应允许任何类型的 space。是否有任何一种模式可以帮助我实现这一目标。

谢谢。

Answer 1

尝试Validators.pattern(/^[a-zA-Z0-9_-]*$/)

Answer 2

Validators.pattern 与 FormBuilder 我们可以在通过 FormBuilder 或 FormGroup 创建表单时使用 Validators.pattern 进行模式验证。这里我们将提供 FormBuilder 的代码片段。

unamePattern = "^[a-z0-9_-]{8,15}$";
userForm = this.formBuilder.group({
username: ['', Validators.pattern(this.unamePattern)],})

但是如果你不想让“-”使用这个

unamePattern = "^[a-z0-9_]{8,15}$";

Answer 3

试试这个

 pattern1 =  "^[0-9_-]{10,12}$";
 phone: ['', [Validators.required, Validators.pattern(this.pattern1)]]

Answer 4

对我有用。

在.ts文件中写入如下代码。

pattern="^[ a-zA-Z][a-zA-Z ]*$";

this.projectRoleAssignFrom =  this.formBuilder.group({
   userName : [''],
   userRole : [''],
   project : [''],
   searchInput : ['', Validators.pattern(this.pattern)]
 })

在 html 文件中写入以下代码。

  <div class="form-group">
                     <mat-form-field>
                         <mat-select placeholder="Select User" formControlName="userName"
                             (click)="clearSearchField()">
                             <div class="searchbar">
                                 <md-input-container class="full-width-ex" color="accent">
                                     <input mdInput #input type="text" class="searchbar-input"
                                         (input)="filterAssociates($event.target.value)" placeholder="Search User"
                                         formControlName="searchInput">
                                 </md-input-container>
                                 <mat-error class="alert-danger" *ngIf="projectRoleAssignFrom.get('searchInput').hasError('pattern')" >
                                     Invalid User</mat-error>
                             </div>
                             <mat-option *ngFor="let user of filteredAssociatesList" [value]="user.fullName"
                                 (click)="getValues('user', user.id)">
                                 {{ user.fullName }}
                             </mat-option>
                             <!-- <mat-error *ngIf="userName.invalid && userName.touched"></mat-error> -->
                         </mat-select>
                     </mat-form-field>
                 </div>

Angular 5 个响应式表单模式验证器

Angular 5 Reactive Form Pattern Validators

angular

angular-reactive-forms