質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2979閲覧

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

terarara13

総合スコア4

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/16 10:39

編集2022/01/12 10:55

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/01/06 08:53

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

回答2

0

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

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

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

投稿2020/01/21 01:09

kaito3desuyo

総合スコア143

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

html

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

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

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

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

html

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

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

投稿2020/01/06 09:16

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問