Угловая кнопка отключения и сообщение об ошибке ввода мата

У меня есть текстовое поле и кнопка. Ввод текстового поля - это URL-адрес, и существует метод проверки формата URL-адреса, который в этом примере равен isUrlFormatValid ().

Если isUrlFormatValid () выходит из строя, то внизу текстового поля появляется сообщение об ошибке, и кнопка становится пассивной и не может быть нажата. Но моя проблема в том, что при первой загрузке страницы результат этого метода автоматически становится ложным, поэтому сообщение об ошибке появляется и для пустого поля.

<mat-card class = "">
  <mat-card-content fxLayout = "row wrap" fxLayoutAlign = "left" fxLayoutGap = "15px">

    <div>
      <mat-form-field>
        <mat-label>Enter link here</mat-label>
        <input type = "url" matInput [(ngModel)] = "domainName">
      </mat-form-field>
      <mat-error *ngIf = "isUrlFormatValid()">
        Please enter the link in correct format
      </mat-error>
    </div>

  </mat-card-content>
  <div>
    <button type = "button" id = "search" class = "" [disabled] = "isUrlFormatValid()"
            (click) = "addClicked()">Add Domain
    </button>
  </div>
</mat-card>

И определение метода в файле ts:

isUrlFormatValid() {
    const pattern = /^((((https?)(://))?((www)\.)?)?|mailto:(\w+\.?\w+)\@)([a-z0-9]+\.[a-z0-9]+)+$/;

    if (pattern.test(this.domainName)) {
      return false;
    }
    return true;
  }

если я изменю строку в файле ts:

if (pattern.test(this.domainName))

к:

if (pattern.test(this.domainName) || this.domainName == null) 

тогда проблема с сообщением об ошибке решена, но на этот раз кнопка становится кликабельной при запуске, если я что-то напишу, да, она работает, но когда страница загружается впервые, она становится активной.

Итак, как я могу решить эту проблему?