Number field Required validation Not working : Angular2

Question

I am working with angular 2.Required field validator for number field showing uncertain behaviour.In edit mode it show required field error even though it contains value.

my html code:

<input type="number" placeholder="Enter Pincode" [formControl]="formLocation.controls['Pincode']" class="form-control error" (input)="objLocationDetails.LocationPincode=Pincode.value" value="{{objLocationDetails.LocationPincode}}" #Pincode/>

<div *ngIf="objLocationDetails.LocationPincode=='' ||(formLocation.controls['Pincode'].hasError('required') &&
                                                                    formLocation.controls['Pincode'].touched)" class="alert alert-danger">
    Please enter pincode
</div>

and typescript code:

private InitialiseFormControls(): void {
    this.formLocation = this.formBuilderRef.group({
        'LocationName': [null, [Validators.required]],
        'Address1': [null, [Validators.required]],
        'Address2': [null],
        'Pincode': [null,[Validators.required]]

 });

After debugging I found that

(formLocation.controls['Pincode'].hasError('required')

this statement returns 'true' and thats why Is shows error.. but why this is happening?

make sure when edit mode input value type is Number not String — Yatin Patel, Jul 07 '17 at 11:29
I second that what @Yatinpatel has said. You might be passing the values as string and this might be the prime reason for this error. — The Hungry Dictator, Jul 07 '17 at 11:33
@yatin-patel (formLocation.controls['Pincode'].hasError('required') this statement returns true value — user19041992, Jul 07 '17 at 11:44

score 0 · Answer 1 · answered Jul 10 '17 at 05:30

    private InitialiseFormControls(): void {
     this.formLocation = this.formBuilderRef.group({
     'LocationName': [null, [Validators.required]],
     'Address1': [null, [Validators.required]],
     'Address2': [null],
     'Pincode': ["",[Validators.required]] });

use empty string in place of null.

Number field Required validation Not working : Angular2

1 Answers1