首页 > 解决方案 > Validators.pattern 未显示手机号码错误

问题描述

组件.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>

组件.ts

userGroup:FormGroup;

ngOnInit() { this.userGroup = this.fb.group({

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

}

对于空白,它工作得很好,但对于模式,它没有显示任何错误

标签: javascriptnode.jsangularangular-reactive-forms

解决方案


试试这样:

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

推荐阅读