title: Angular form validation to validate the phone number
body: <p>I am trying to validate the phone number using regex expression in angular </p>
  
  <p>HTML content</p>
  
  <pre><code>&lt;div class="form-group row"&gt;
                  &lt;input type="text" class="form-control" appPhoneMask placeholder="Mobile Number" autocomplete="off"
                      [ngClass]="{ 'is-invalid': (f.inputCountryCode.errors &amp;&amp; mobileNumberform.submitted) }"
                      formControlName="inputCountryCode"&gt;
                  &lt;div *ngIf="(f.inputCountryCode.invalid ) || (f.inputCountryCode.invalid &amp;&amp; (f.inputCountryCode.dirty || f.inputCountryCode.touched))"
                      class="invalid-feedback"&gt;
                      &lt;div *ngIf="f.inputCountryCode.errors.required"&gt;This field is required.&lt;/div&gt;
                      &lt;div *ngIf="f.inputCountryCode.errors.pattern"&gt;Invalid phone number.&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>TS code </p>
  
  <pre><code> this.$form = this.$builder.group({
        selectCountryCode: [null, Validators.required],
        inputCountryCode: [null, [Validators.required, Validators.pattern("[0-9 ]{12}")]]
      });
  </code></pre>
  
  <p>The validation pattern should allow numeric number with space because I am using the phone number masking which add space after 3 digits.</p>
  
  <p><a href="https://i.stack.imgur.com/U2GvC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U2GvC.png" alt="enter image description here"></a></p>
  
  <p>The pattern is not working keep getting phone numner validation false</p>
  
  <p><a href="https://stackoverflow.com/questions/46339025/angular-4-mobile-number-validation">Angular 4 Mobile number validation</a></p>
  
  <p><a href="https://stackoverflow.com/questions/13973206/regex-for-field-that-allows-numbers-and-spaces">Regex for field that allows numbers and spaces</a></p>
  
  <p>Masking directive </p>
  
  <pre><code>export class PhoneMaskDirective {
  
    constructor(public ngControl: NgControl) { }
  
    @HostListener('ngModelChange', ['$event'])
    onModelChange(event) {
      this.onInputChange(event, false);
    }
  
    @HostListener('keydown.backspace', ['$event'])
    keydownBackspace(event) {
      this.onInputChange(event.target.value, true);
    }
  
  
    onInputChange(event, backspace) {
      let newVal = event.replace(/\D/g, '');
      if (backspace &amp;&amp; newVal.length &lt;= 6) {
        newVal = newVal.substring(0, newVal.length - 1);
      }
      if (newVal.length === 0) {
        newVal = '';
      } else if (newVal.length &lt;= 3) {
        newVal = newVal.replace(/^(\d{0,3})/, '$1');
      } else if (newVal.length &lt;= 6) {
        newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '$1 $2');
      } else if (newVal.length &lt;= 9) {
        newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '$1 $2 $3');
      } else {
        newVal = newVal.substring(0, 10);
        newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '$1 $2 $3');
      }
      this.ngControl.valueAccessor.writeValue(newVal);
    }
  }
  </code></pre>