ngForm não desabilita o botão de acesso

Boa tarde. Por alguma razão, quando passo o comando do [disabled]="loginForm.invalid" não desabilita o botão

<div class="account-pages my-5 pt-sm-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6 col-xl-5">
        <div class="card overflow-hidden">
          <div class="bg-soft bg-primary">
            <div class="row">
              <div class="col-7">
                <div class="text-primary p-4">
                  <h5 class="text-primary">Bem Vindo(a)</h5>
                  <p>Acesso ao CRM Royale</p>
                </div>
              </div>
              <div class="col-5 align-self-end">
                <img src="assets/images/profile-img.png" alt="" class="img-fluid">
              </div>
            </div>
          </div>
          <div class="card-body pt-0">
            <div>
              <a routerLink="/">
                <div class="avatar-md profile-user-wid mb-4">
                  <span class="avatar-title rounded-circle bg-light">
                    <img src="assets/images/logo.svg" alt="" class="rounded-circle" height="34">
                  </span>
                </div>
              </a>
            </div>
            <div class="p-2">
              <form class="form-horizontal" (ngSubmit)="login()" #loginForm="ngForm">

                <div class="mb-3">
                  <label for="email">Email</label>
                  <input type="email" #campoEmail="ngModel" required [(ngModel)]="usuario" [ngModelOptions]="{standalone: true}"  class="form-control" id="email" placeholder="Email"/>

                  <app-mensagem
                  *ngIf="campoEmail.invalid && campoEmail.touched" mensagem="Usuário Obrigatório"></app-mensagem>
                </div>

                <div class="mb-3">
                  <label for="password">Senha</label>
                  <div class="input-group auth-pass-inputgroup">
                    <input type="password"  #campoSenha="ngModel" required class="form-control" [(ngModel)]="senha" [ngModelOptions]="{standalone: true}" placeholder="Enter password"/>


                    <button class="btn btn-light ms-0" type="button" id="password-addon"><i
                        class="mdi mdi-eye-outline"></i></button>

                  </div>
                  <app-mensagem *ngIf="campoSenha.invalid && campoSenha.touched" mensagem="Senha Obrigatória"></app-mensagem>

                </div>

                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="remember-check">
                  <label class="form-check-label" for="remember-check">
                      Remember me
                  </label>
              </div>

                <div class="mt-3 d-grid">
                  <button class="btn btn-primary" type="submit" [disabled]="loginForm.invalid">Acessar</button>
                </div>

              </form>
            </div>

          </div>
        </div>
        <div class="mt-5 text-center">
          <p>© {{year}} Power by Will</p>
        </div>

      </div>
    </div>
  </div>

  <!-- end container -->
</div>
<!-- end page -->

Alguma sugestão?