Question

我需要使用Validators.pattern在响应式表单（表单控件）中提出一个验证模式。条件为字母数字，仅允许使用下划线，连字符。不允许使用任何类型的空间。是否有任何一种模式可以帮助我实现这一目标。

谢谢。

Answer 1

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

Answer 2

对我有用。

在.ts文件中编写以下代码。

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

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

使用以下代码。

  <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>

Answer 3

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

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

但是，如果您不想允许“-”，请使用此

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

Answer 4

尝试

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

Angular 5反应形式模式验证器

4 个答案: