### 前提・実現したいこと Angular（プログラミング）初心者です。ローカル環境にてサイトを構築しております。 LoginComponentというコンポーネントを用意してログインフォームを作成し、バリデーションの設定を試みたのですが設定が無視され、そのままログインボタンからページ遷移ができてしまいます。エラーも出力されないので具体的にどこが原因なのか分からない状況です。公式リファレンスやqiitaなどでいろいろ調べてみたのですが、原因究明することができませんでした。以下に実際のコードを記載させて頂きます。最終的には「全てのバリデーションがvalidでないとログインボタンが押下できない」状態になればと思っております。拙いコードで申し訳ありませんが、修正点等あればご教示頂けませんでしょうか？他に情報が必要であればご教示ください。よろしくお願いいたします。 ### login.component.html ```ここに言語名を入力

``` ### 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

	@@ -1 +1 @@
1	- 【Angular】~~ログイン~~フォームにバリデーションを設定したいです
1	+ 【Angular】リアクティブフォームにバリデーションを設定したいです

質問編集履歴