title: Angular Material url validation with pattern
body: <p>Helo, </p>
  
  <p>I am working with Angular Material and I have created an form field and I want to validate my url but it is not working. I tried with email and it is working. 
  I want also that the button should be disabled until I enter a valid url:</p>
  
  <p>Here is my code:</p>
  
  <pre><code>export class StartComponent implements OnInit {
    searchValue: string;
    url: any;
    public reg = /[-a-zA-Z0-9@:%_\+.~#?&amp;//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&amp;//=]*)?/gi;
  
    constructor() {  }
    ngOnInit() {
      this.url = new FormControl('', [Validators.required, Validators.pattern(this.reg)]);
      this.getErrorMessage();
    }
    getErrorMessage() {
      return this.url.hasError('required') ? 'You must enter a value' :
          this.url.hasError('email') ? 'Not a valid url' :
              '';
    }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;mat-card class="searchbox"&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Enter your url" [formControl]="url" required&gt;
          &lt;mat-error *ngIf="url.invalid"&gt;{{getErrorMessage()}}&lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;!--Here button should be disabled if url not valid and until there is something entered--&gt;
      &lt;button mat-stroked-button color="warn"&gt;GO&lt;/button&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/material-form-validation" rel="nofollow noreferrer">Here</a> is the the app at stackblitz</p>