angular - 无法在表单验证中找出无效模式
问题描述
我正在使用 Angular 7 Admin -dashboard,我正在创建一个注册页面。我在表单中引入了诸如 required 和 pattern 之类的验证。但是,无论验证中的模式如何,我都会在 UI 中不断收到“无效模式”。我无法弄清楚我的错误。
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/这样的正则表达式工具来调试它。
当正则表达式未按预期工作时,提示是从最基本的表达式开始并从那里增加复杂性,直到它中断/测试用例失败,然后您就会知道错误在哪里。
推荐阅读
- html - 悬停时标签不显示
- flutter - 如何检查设备方向在颤动中是横向还是横向?
- python - 即使损失计算正确,当输入中的 nan 时梯度中的 nan
- oracle-apex - 警报消息后取消选中复选框
- android - 在 Android 中传递结果和错误的最佳方式是什么?
- javascript - 如何以编程方式将项目附加到对象?
- c# - 在消费项目中缺少 DLL 自身的依赖项
- google-apps-script - Google Apps 脚本 - 匹配 2 个字符串
- c# - 如何将包含 SqlConnection 对象的类固定到内存中
- python - UnboundLocalError:分配前引用了局部变量'print'?