我正在使用 Angular 7 Admin -dashboard,并且正在创建一个注册页面。我在表单中引入了required和pattern等验证。但是,无论验证中的模式如何,我都会在用户界面中收到“无效模式”。我无法找出我的错误。
app.component.ts
constructor(private fb:FormBuilder , private http: HttpClient) {
this.registrationForm = this.fb.group({
'username': ['',[Validators.required, Validators.pattern("[A-Za-z0-9 @)(_\\-]{1,20}")]],
'firstname':['', [Validators.required, Validators.pattern("[A-Za-z @)(]{1-20}")]],
'lastname':['',[Validators.required, Validators.pattern("[A-Za-z @)(]{1-20}")]],
'city': ['', [Validators.required, Validators.pattern("[A-Za-z0-9 @)(_\\-)]{1-30}") ]] ,
'pin': ['',[Validators.required, Validators.pattern("[0-9 @)(\\-_]{1-20}")]],
'dob':['',[Validators.required, Validators.pattern("[0-9 @)(\\-/]{1-20}")]],
'email':['',[Validators.required, Validators.pattern("[A-Za-z0-9@)(_\\-/)(*&^%$#:,=+`]")]],
'mobile':['',[Validators.required, Validators.pattern("[0-9]{10}")]],
'password':['', [Validators.required, Validators.pattern("[A-Za-z0-9 @)(*&^%$#@!~`:;.,/?+/*\\-]{4-30}") ]],
'confirmPassword':['',[Validators.required, Validators.pattern("[A-Za-z0-9 @)(*&^%$#@!~`:;.,/?+/*\\-]{4-30}") ]]
})
}
app.component.html
<form [formGroup]="registrationForm" (ngSubmit)= "register(registrationForm.value)">
<div class = "col-md-8">
<div class="form-group">
<label>User-Id</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['username']"
formControlName="username">
<p id = "validatorStyle" *ngIf="registrationForm.get('username').hasError('required') && registrationForm.get('username')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('username').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['firstname']"
formControlName="firstname">
<p id="validatorStyle" *ngIf="registrationForm.get('firstname').hasError('required') && registrationForm.get('firtname')?.touched">*required</p>
<p id="validatorStyle" *ngIf="registrationForm.get('firstname').hasError('pattern')">*invalid pattern</p>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['lastname']"
formControlName="lastname">
<p id = "validatorStyle" *ngIf="registrationForm.get('lastname').hasError('required') && registrationForm.get('lastname')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('lastname').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['city']" formControlName="city">
<p id = "validatorStyle" *ngIf="registrationForm.get('city').hasError('required') && registrationForm.get('city')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('city').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>Pin</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['pin']" formControlName="pin">
<p id = "validatorStyle" *ngIf="registrationForm.get('pin').hasError('required') && registrationForm.get('pin')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('pin').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>DOB</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['dob']" formControlName="dob">
<p id = "validatorStyle" *ngIf="registrationForm.get('dob').hasError('required') && registrationForm.get('dob')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('dob').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" [formControl]="registrationForm.controls['email']"
formControlName="email">
<p id = "validatorStyle" *ngIf="registrationForm.get('email').hasError('required') && registrationForm.get('email')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('email').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>Phone number</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['mobile']"
formControlName="mobile">
<p id = "validatorStyle" *ngIf="registrationForm.get('mobile').hasError('required') && registrationForm.get('mobile')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('mobile').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['password']"
formControlName="password">
<p id = "validatorStyle" *ngIf="registrationForm.get('password').hasError('required') && registrationForm.get('password')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('password').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="text" class="form-control" [formControl]="registrationForm.controls['confirmPassword']"
formControlName="confirmPassword">
<p id = "validatorStyle" *ngIf="registrationForm.get('confirmPassword').hasError('required') && registrationForm.get('confirmPassword')?.touched">*required </p>
<p id = "validatorStyle" *ngIf="registrationForm.get('confirmPassword').hasError('pattern') ">*invalid pattern </p>
</div>
<div class="text-center">
<button type="submit" [routerLink]="['dashboards/v1']" [disabled]="!registrationForm.valid" class="btn-btn-dark">Submit</button>
</div>
</div>
</form>
最佳答案
这更像是一个正则表达式问题,而不是 Angular 问题。
正则表达式可能很棘手,请使用正则表达式工具,如 https://regex101.com/进行调试。
当正则表达式未按预期工作时,提示是从最基本的表达式开始,然后从那里增加复杂性,直到它中断/测试用例失败,然后您就会知道错误在哪里。
关于angular - 无法找出表单验证中的无效模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57745591/