无法在表单验证中找出无效模式

Question

我正在使用 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>

图片

Answer 1

这比 Angular 更像是一个正则表达式问题。

正则表达式可能很棘手，使用像https://regex101.com/ 这样的正则表达式工具来调试它。

当正则表达式未按预期工作时，提示是从最基本的表达式开始并从那里增加复杂性，直到它中断/测试用例失败，然后您就会知道错误在哪里。

Answer 2

您的正则表达式有问题。

对于您拥有的城市：

[A-Za-z0-9 @)(_\\-)]{1-30}

正确的是：

[A-Za-z0-9 @)(_\\-)]{1,30}