【Angular】リアクティブフォームにバリデーションを設定したいです

Question

前提・実現したいこと

Angular（プログラミング）初心者です。
ローカル環境にてサイトを構築しております。
LoginComponentというコンポーネントを用意してログインフォームを作成し、
バリデーションの設定を試みたのですが設定が無視され、そのままログインボタンから
ページ遷移ができてしまいます。
エラーも出力されないので具体的にどこが原因なのか分からない状況です。

公式リファレンスやqiitaなどでいろいろ調べてみたのですが、原因究明することができませんでした。
以下に実際のコードを記載させて頂きます。
最終的には「全てのバリデーションがvalidでないとログインボタンが押下できない」
状態になればと思っております。
拙いコードで申し訳ありませんが、修正点等あればご教示頂けませんでしょうか？
他に情報が必要であればご教示ください。
よろしくお願いいたします。

login.component.html

<div class='Login_Page'>
    <mat-card class='Login_Form'>
    <mat-card-title fxLayoutAlign='center center'>
        Login
    </mat-card-title>
        <mat-card-content>
            <form [formGroup]="loginForm" novalidate fxLayout="column" fxLayoutGap='20px' fxLayoutAlign='center center' class='form'>
                <mat-form-field class='form_field'>
                    <input matInput placeholder="Email" type='email' FormControlName='Email' required>
                    <mat-error *ngIf='Email.invalid && (Email.dirty || Email.touched)'>
                        {{getEmailErrorMessage()}}
                    </mat-error>
                </mat-form-field>
                <mat-form-field class='form_field'>
                    <input matInput placeholder="Password" type='password' FormControlName='pass' required>
                    <mat-error *ngIf='pass.invalid && (pass.dirty || pass.touched)'>
                        {{getPassErrorMessage()}}
                    </mat-error>
                </mat-form-field>
                <button type='submit' mat-raised-button color='primary' [disabled]='loginForm' routerLink='/position'>
                    Submit
                </button>
        　　　</form>
        </mat-card-content>
    </mat-card>
</div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { 
  Validators,
  FormBuilder,
  FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this.fb.group({
      Email: ['', [Validators.required, Validators.email]],
      pass: ['', [Validators.required]]
    });
  }

  get Email()　{ return this.loginForm.get('Email') };
  get pass() { return this.loginForm.get('pass'); }

  getEmailErrorMessage() {
    return this.Email.hasError('required') ? 'You must enter a value' :
        this.Email.hasError('email') ? 'Not a valid email' :
            '';
  }
  getPassErrorMessage() {
    return this.pass.hasError('required') ? 'You must enter a value' :
            '';
  }
}

###app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { LoginComponent } from './auth/login/login.component';
import { SignupComponent } from './auth/signup/signup.component';
import { PositionComponent } from './mgmt/position/position.component';
import { ApplicantComponent } from './mgmt/applicant/applicant.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  ReactiveFormsModule,
  FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { 
  MatTableModule,
  MatStepperModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatIconModule } from '@angular/material';


@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    LoginComponent,
    SignupComponent,
    PositionComponent,
    ApplicantComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    MatCardModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatStepperModule,
    MatTableModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

補足情報（FW/ツールのバージョンなど）

Angular: 8.2.14

Comments

[miyabi_pudding]

初心者さんとのことですが、何かを参考に、書いたものなのでしょうか？？
かなり熟達しているようにも見えなくもないのですが・・・。

Answer 1

<input matInput placeholder="Email" type='email' FormControlName='Email' required>

この部分などのFormControlName、正しくはformControlNameです。
FormGroupは正しく生成されていますが、それがHTML上のinput要素に紐づいていないため、
表向きはバリデーションが動作していないように見えています。
当然FormGroupは正しいのでエラーは発生しません。割とありがちなうっかりミスですね。

プラス、miyabi_takatsukさんの指摘された[disabled]="loginForm"の部分を修正すれば正常に動作すると思われます。

Answer 2

環境を再現することがかなり難しいので、確実なことは言えません。
なので、ここなのではないか？という部分を指摘させていただきます。

<!-- [disabled]="ここには、論理値の変数を入れるべきではないか" -->
<button type='submit' mat-raised-button color='primary' [disabled]='loginForm' routerLink='/position'>
  Submit
</button>

[disabled]="true or false"にすべきであって、そこにFormGroupeオブジェクトを入れてる時点で間違いです。
そこは、disabled属性をバインディングにて、要素に入れるか入れないかを定義している箇所なので、
おそらく、そこが、永久にfalseが入っている状態なので、
disabledが効かず、送信できてしまうのかと。

なので、コンポーネントのメンバに、論理値のpublicなメンバを用意し、
普段はtrue、バリデーションが通ればfalseとしとくのがいいかと。

いや、それだと、そもそも押せないので、
Angular公式ドキュメントに従い、下記のようにしましょう。

<button type='submit' mat-raised-button color='primary' [disabled]='!loginForm.valid' routerLink='/position'>
  Submit
</button>

うまくいかない時は、参考にしたドキュメントと、自身のコードのどこが違うか、をよく見比べてみましょう。