Validators.pattern не показывает ошибку для номера мобильного телефона - PullRequest
Новая
       3

Validators.pattern не показывает ошибку для номера мобильного телефона

0 голосов
/ 12 марта 2020

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>

component.ts 

userGroup:FormGroup;

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

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

}

Для бланка это работает отлично, но для шаблона это не показывает никакой ошибки

Ответы [ 2 ]

2 голосов
/ 12 марта 2020

Попробуй так: 

mobile:['',[Validators.required,Validators.pattern(/^[0-9]{10}$/)]]
});
0 голосов
/ 12 марта 2020

component.ts 

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="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>
...