title: Angular reactive form phone number pattern validation
body: <p>I have an add/edit reactive form with phone number input field. I have added a pipe that transforms the input from <code>9999999999</code> to <code>(999) 999-9999</code> and I am using a regex pattern to validate the same.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;input [value]=&quot;form.get('phone').value | phoneFormat&quot; maxlength=&quot;14&quot; formControlName=&quot;phone&quot;/&gt;
  </code></pre>
  <blockquote>
  <p>phoneFormat is a pipe that converts the input value to desired format.</p>
  </blockquote>
  <p><strong>Component</strong></p>
  <pre><code>this.form = this.formBuilder.group({
    phone: ['', [Validators.pattern(/((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/)]]
  });
  </code></pre>
  <p><strong>Issues</strong></p>
  <ol>
  <li>I have to transform the phone value to <code>9999999999</code> while saving the form.</li>
  <li>While editing the form, the pattern validation fails initially because the phone number is not in desired format.</li>
  </ol>
  <p>I am looking for a neat approach to handle this type of case.</p>