Javascript Validators.pattern未显示手机号码的错误

component.html

<div class="form-group">
            <label>Enter mobile</label>
            <input type="text" class="form-control" formControlName="mobile" ><br>
        </div>
        <div *ngIf="userGroup.controls.mobile.invalid && (userGroup.controls.mobile.dirty || userGroup.controls.mobile.touched)">
            <div *ngIf="userGroup.controls.mobile.errors.required">
                Mobile number cannot be blank
            </div>
            <div *ngIf="userGroup.controls.mobile.errors.pattern">
                Mobile number should be 10 digits only
            </div>
        </div>

<div class="form-group">
   <label>Enter mobile</label>
   <input type="text" class="form-control" formControlName="mobile"><br>
</div>
<div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)">
   <div *ngIf="mobile.errors.required">
      Mobile number cannot be blank
   </div>
   <div *ngIf="mobile.errors.pattern">
      Mobile number should be 10 digits only
   </div>
</div>

恩戈尼尼特（）{ this.userGroup=this.fb.group({

}

对于空白，它是完美的，但是对于模式，它没有显示任何错误

像这样尝试：

mobile:['',[Validators.required,Validators.pattern(/^[0-9]{10}$/)]]
});

试着这样做：

mobile:['',[Validators.required,Validators.pattern(/^[0-9]{10}$/)]]
});

组件技术

userGroup:FormGroup;

userGroup:FormGroup;

//simple getter to easily access control from template
get mobile() { return this.userGroup.get('mobile'); }

ngOnInit() { 
   this.userGroup = this.fb.group({
      //also validators should passed in one array as a second argument to this literal
      mobile:['', [Validators.required, Validators.pattern(/^[0-9]{10}$/)]]
});

component.html

<div class="form-group">
            <label>Enter mobile</label>
            <input type="text" class="form-control" formControlName="mobile" ><br>
        </div>
        <div *ngIf="userGroup.controls.mobile.invalid && (userGroup.controls.mobile.dirty || userGroup.controls.mobile.touched)">
            <div *ngIf="userGroup.controls.mobile.errors.required">
                Mobile number cannot be blank
            </div>
            <div *ngIf="userGroup.controls.mobile.errors.pattern">
                Mobile number should be 10 digits only
            </div>
        </div>

<div class="form-group">
   <label>Enter mobile</label>
   <input type="text" class="form-control" formControlName="mobile"><br>
</div>
<div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)">
   <div *ngIf="mobile.errors.required">
      Mobile number cannot be blank
   </div>
   <div *ngIf="mobile.errors.pattern">
      Mobile number should be 10 digits only
   </div>
</div>

进入手机


手机号码不能为空
手机号码只能是10位数字

component.ts

userGroup:FormGroup;

userGroup:FormGroup;

//simple getter to easily access control from template
get mobile() { return this.userGroup.get('mobile'); }

ngOnInit() { 
   this.userGroup = this.fb.group({
      //also validators should passed in one array as a second argument to this literal
      mobile:['', [Validators.required, Validators.pattern(/^[0-9]{10}$/)]]
});

component.html

<div class="form-group">
            <label>Enter mobile</label>
            <input type="text" class="form-control" formControlName="mobile" ><br>
        </div>
        <div *ngIf="userGroup.controls.mobile.invalid && (userGroup.controls.mobile.dirty || userGroup.controls.mobile.touched)">
            <div *ngIf="userGroup.controls.mobile.errors.required">
                Mobile number cannot be blank
            </div>
            <div *ngIf="userGroup.controls.mobile.errors.pattern">
                Mobile number should be 10 digits only
            </div>
        </div>

<div class="form-group">
   <label>Enter mobile</label>
   <input type="text" class="form-control" formControlName="mobile"><br>
</div>
<div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)">
   <div *ngIf="mobile.errors.required">
      Mobile number cannot be blank
   </div>
   <div *ngIf="mobile.errors.pattern">
      Mobile number should be 10 digits only
   </div>
</div>

进入手机


手机号码不能为空
手机号码只能是10位数字

我认为您的控制台抛出以下错误：预期验证器返回角度承诺或可观察。因此，请使用以下链接修复问题。我认为@Jinu answer修复您的问题。有关更多信息，请查看我给出的链接。我认为您的控制台抛出以下错误：预期验证器返回角度承诺或可观察。因此请使用以下链接修复问题。我认为@Jinu answer可以修复您的问题。有关更多信息，请查看我提供的链接。