Angular 5 反应式表单模式验证器

Question

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

谢谢。

Answer 1

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 2

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

Answer 3

这个对我有用。

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

    pattern="^[ a-zA-Z][a-zA-Z ]*$"; this.projectRoleAssignFrom = this.formBuilder.group({ userName : [''], userRole : [''], project : [''], searchInput : ['', Validators.pattern(this.pattern)] })

2. 在 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>

Answer 4

尝试这个

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