webcat12345 / ngx-intl-tel-input

Phone number input field to support international numbers, Angular
MIT License
213 stars 339 forks source link

Enable/Disable validatePhoneNumber Validatiion as per need #185

Closed VishalKumarMitra786 closed 5 years ago

VishalKumarMitra786 commented 5 years ago

I want to just use ngx-intl-tel-input without any validation check as I don't want to have it as a required field so the Element is continuously making the form invalid and as a result of which I am unable to use it as a simple element.

Please help me its an urgent need.

Thanks in advance

michaelWagner commented 5 years ago

I too need this to be optional!

pasevin commented 5 years ago

I'm not sure why it's making your form invalid. In my case I had to specify "required" manually for it to be treated as required.

checkoutForm = new FormGroup({
        name: new FormControl(undefined, Validators.required),
        email: new FormControl(undefined, [Validators.required, Validators.email]),
        phone: new FormControl(undefined, [Validators.required]),
        address: new FormControl(undefined, Validators.required),
        city: new FormControl(undefined, Validators.required),
        country: new FormControl(undefined, Validators.required),
        zip: new FormControl(undefined, Validators.required)
    });
<div *ngIf="f.form.controls['phone'].invalid && f.form.controls['phone'].touched" class="form-error-label">
                  <div *ngIf="f.form.controls['phone'].errors?.required">Phone required.</div>
                  <div *ngIf="!f.form.controls['phone'].errors?.required && !f.form.controls['phone'].errors?.isValid">Phone number is not valid.</div>
                </div>
                <ngx-intl-tel-input 
                [cssClass]="'custom'" 
                [preferredCountries]="['us', 'gb']" 
                [enablePlaceholder]="true" 
                [enableAutoCountrySelect]="true"
                name="phone" formControlName="phone"></ngx-intl-tel-input>

If I remove [Validators.required] it stops being required and my form is not being treated as invalid.

pasevin commented 5 years ago

This pull request (in progress, needs some minor fixes) is solving this issue: #181

pasevin commented 5 years ago

Update to 2.2.1