Validation 角度8-FormControl模式验证
我正在尝试仅用字母验证用户字段。 遵循Validation 角度8-FormControl模式验证,validation,pattern-matching,angular8,Validation,Pattern Matching,Angular8,我正在尝试仅用字母验证用户字段。 遵循https://angular.io/api/forms/Validators#pattern 我没有得到预期的结果 验证器。必需的工作。 Validator.minLength有效。 但模式并非如此 我需要用户字段只有字母。 已经在论坛中查找了类似的问题,并尝试了一些实现,但不起作用 我还尝试将direct添加到html标记[pattern]='onlyleters',但也没有成功 html }我在这里再试一次。 <form (ngSubmit)="
https://angular.io/api/forms/Validators#pattern
我没有得到预期的结果
验证器。必需的工作。
Validator.minLength有效。
但模式并非如此
我需要用户字段只有字母。
已经在论坛中查找了类似的问题,并尝试了一些实现,但不起作用
我还尝试将direct添加到html标记[pattern]='onlyleters'
,但也没有成功
html
}我在这里再试一次。
<form (ngSubmit)="onSubmitNewUser()" [formGroup]="userFormGroup" >
<mat-card>
<mat-card-title fxLayoutAlign="center">{{'USERS.NEW'|translate}}</mat-card-title>
<mat-card-content fxLayoutAlign="left" fxLayout="column">
<mat-form-field fxFlex="100%">
<mat-label>{{'USERS.GROUP'|translate}}</mat-label>
<mat-select formControlName="group" >
<mat-option *ngFor="let group of groups" value="{{ group.users_group_id }}">{{ group.users_group_name }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="100%">
<input
[pattern]="pattern"
placeholder="{{'USERS.USERNAME'|translate}}"
type="text"
formControlName="username"
matInput />
<mat-error *ngIf="formControlUsername.hasError('required')" >
{{'VALIDATION.REQUIRED'|translate}}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="250px" hintLabel="{{'VALIDATION.PASSWORD_HINT'|translate}}">
<input
type="password"
placeholder="{{'USERS.PASSWORD'|translate}}"
matInput
formControlName="password"/>
<mat-hint align="end"> {{ formControlPassword.value?.length }} / 6 </mat-hint>
<mat-error>{{'VALIDATION.MIN_LENGTH'|translate}}</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions fxLayoutAlign="left">
<button
type="submit"
color="primary"
mat-raised-button
[disabled]="userFormGroup.invalid">{{'SAVE'|translate}}</button>
</mat-card-actions>
</mat-card>
</form>
import { Component, OnInit} from '@angular/core';
import { FormControl, FormGroup, Validators} from '@angular/forms';
import { GroupsModel} from '../_models/groups.model';
import { UsersService} from '../_services/users.service';
@Component({
selector: 'app-users-add',
templateUrl: './users-add.component.html',
styleUrls: ['./users-add.component.scss']
})
export class UsersAddComponent implements OnInit {
pattern = "[a-zA-Z]*";
formControlGroup = new FormControl('',{
validators: [Validators.required]
});
formControlUsername = new FormControl('',{
validators: [
Validators.required,
Validators.pattern(this.pattern)
]
});
formControlPassword = new FormControl('',{
validators: [
Validators.required,
Validators.minLength(6)
]
});
userFormGroup: FormGroup;
groups: GroupsModel[] = [];
constructor(private usersService: UsersService) { }
ngOnInit() {
this.userFormGroup = new FormGroup({
group: this.formControlGroup,
username: this.formControlUsername,
password: this.formControlPassword
});
this.usersService.getGroups().subscribe( data => {
this.groups = data
});
}
onSubmitNewUser() {
console.log(this.userFormGroup.value);
}