Validation Message is not displayed

[noblemfd]

In my Angular-11, I am using ngx-intl-tel-input

` <div class="form-group">
            <div class="input-group mb-3">
              <ngx-intl-tel-input
              [ngClass]="{ 'is-invalid': submitted && f.mobile_number.errors }" 
              [cssClass]="'form-control mb-3'" 
              [preferredCountries]="preferredCountries" 
              [enableAutoCountrySelect]="true"
              [value]="'+91 8077667755'"
              [searchCountryFlag]="true"
              [selectFirstCountry]="false" 
              [enablePlaceholder]="true"                           
              name="mobile_number" 
              formControlName="mobile_number"
              [phoneValidation]="true"              
              name="mobile_number" 
              formControlName="mobile_number">
          </ngx-intl-tel-input>                  
                <div class="input-group-append">
                    <div class="input-group-text"><i class="fa fa-phone"></i></div>
                </div>
                <div *ngIf="submitted && f.mobile_number.errors" class="invalid-feedback">
                  <div *ngIf="f.mobile_number.errors.required">Mobile Number is required</div>
                  <div *ngIf="f.mobile_number.errors.maxlength">Mobile Number cannot be more than 15 characters</div>
              </div>                  
            </div>                
        </div>`

Typescript:

` ngOnInit(): void {
this.form = this.fb.group({
  mobile_number: ['', [Validators.required, Validators.maxLength(15)]],
  email: ['', [Validators.required, Validators.email]],],
  terms: [false, Validators.requiredTrue]
})    
  }`

It is not displaying any validation message whenever there is error.

How do I resolve this?

Thanks

[FranMackinlay]

Any updates on this?

Also, it would be nice to have a reason why the phone number failed the validation in the return object of the form control. Ej. Missing x digits or there are too many digits, Invalid number, etc

Example 1: ` {

"validation": { "isValid": false, "reason": "Invalid Number" }, "phone": { "number": "000000000000000", "internationalNumber": "+34 000000000000000", "nationalNumber": "000000000000000", "e164Number": "+34000000000000000", "countryCode": "ES", "dialCode": "+34" } } `

Example 2: { "validatePhoneNumber": { "valid": false, "reason": "Invalid Number" } }

[tleperou]

:+1: in here

[vignesh956]

Is input valid: true Is input touched: true Is form valid: true Form value: { "phone": { "number": "76989 58481----", "internationalNumber": "+91 76989 58481", "nationalNumber": "076989 58481", "countryCode": "IN", "dialCode": "+91" } }

"number": "76989 58481----", this not valid phone number right but still it is showing Is input valid: true <ngx-intl-tel-input [cssClass]="'custom-intl-tel-input'" [preferredCountries]="preferredCountries" [enableAutoCountrySelect]="true" [enablePlaceholder]="false" [searchCountryFlag]="true" [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false" [selectedCountryISO]="countryName" [maxLength]="15" [phoneValidation]="true" [separateDialCode]="true" [numberFormat]="PhoneNumberFormat.National" formControlName="phone">

      any special character should not be accept in input filed