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

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

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

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

Q&A

解決済

1回答

1474閲覧

Angularのvalidationについての疑問

JiN4

総合スコア1

Angular

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

0グッド

0クリップ

投稿2020/05/10 03:22

前提・実現したいこと

私は「angular超入門」という参考書で勉強しているAngular初学者です。
Form入力に関するValidationについての記述に疑問を感じた部分があったので質問させていただきました。
疑問点はテンプレートのソースコードにコメントアウトとして記述しています。
「そういうもの」として放置しておくよりは、何故この記述の必要があるのか理解したいと考えています。
初質問となるので質問の仕方に至らぬ点があるかと思いますが、よろしくお願いいたします。

該当のソースコード

componentHtml

1 <form [(formGroup)]="myControl" (ngSubmit)="onSubmit()"> 2 <table> 3 <tr> 4 <th>Name</th> 5 <td> 6 <!-- 7 name.errors != nullがない場合、正常に動かないがその理由が分からない。 8 name.errors.required、name.errors.alpha、どちらかが「!= null」の場合、「name.errors != null」は確定ではないのか。 9 確定ならばname.errors != nullの記述の必要性が分からない。 10 --> 11 <div *ngIf="name.errors != null && name.errors.required != null">Nameは必須項目です。</div> 12 <div *ngIf="name.errors != null && name.errors.alpha != null">半角アルファベッドで入力してください。</div> 13 <div><input type="text" formControlName="name"></div> 14 </td> 15 </tr> 16 <tr> 17 <th>Mail</th> 18 <td> 19 <!-- 20 mail.errors != nullを削除した場合、次のフォームであるageに関するバリデーションエラーの警告文が表示されなくなるのが何故か分からない。 21 --> 22 <div *ngIf="mail.errors != null && mail.errors.email != null">メールアドレスの形式で入力してください</div> 23 <div><input type="text" formControlName="mail"></div> 24 </td> 25 </tr> 26 <tr> 27 <th>age</th> 28 <td> 29 <div *ngIf="age.errors != null && age.errors.min != null">1歳以上で入力してください。</div> 30 <div *ngIf="age.errors != null && age.errors.max != null">150歳以下で入力してください。</div> 31 <div *ngIf="age.errors != null && age.errors.even != null">偶数で入力してください。</div> 32 <div><input type="number" formControlName="age"></div> 33 </td> 34 </tr> 35 <tr> 36 <th></th> 37 <td> 38 <input [disabled]="myControl.invalid" type="submit" value="click"> 39 </td> 40 </tr> 41 </table> 42 </form>

componentTs

1import { Component, OnInit } from '@angular/core'; 2import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms' 3 4function alpha(c: FormControl) { 5 let REGPATTERN = /^[a-zA-Z]+$/; 6 if (REGPATTERN.test(c.value)) { 7 return null; 8 } else { 9 return { alpha: { valid: false } }; 10 } 11} 12 13function even(c: FormControl) { 14 return c.value % 2 == 0 ? null : { even: { valid: false } } 15} 16 17@Component({ 18 selector: 'app-hello', 19 styleUrls: ['./hello.component.css'], 20 templateUrl: './hello.component.html' 21}) 22export class HelloComponent implements OnInit { 23 title: string; 24 message: string; 25 myControl: FormGroup; 26 27 constructor(private fb: FormBuilder) { } 28 29 ngOnInit() { 30 this.title = 'Hello-app' 31 this.message = 'FormBuilderを使う' 32 this.myControl = this.fb.group({ 33 name: ['', [Validators.required, alpha]], 34 mail: ['', [Validators.email]], 35 age: [0, [Validators.min(1), Validators.max(150), even]] 36 }); 37 } 38 39 get name() { return this.myControl.get('name'); } 40 get mail() { return this.myControl.get('mail'); } 41 get age() { return this.myControl.get('age'); } 42 43 onSubmit() { 44 if (this.myControl.invalid) { 45 this.message = 'VALIDATION ERROR' 46 } else { 47 let result = this.myControl.value; 48 this.message = JSON.stringify(result); 49 } 50 } 51} 52

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。

name.errors != null が入っている理由はngIfタグをエラーとさせないためです。
name.errors自体がnullだとname.errors.requiredへのアクセスはエラーとなってしまうため、page処理の中断となってしまいます。
validation処理でエラーが検出されたタイミングでname.errorsにオブジェクトがセットされるロジックなので、name.errorsがnullの時にはname.errors.requiredのアクセスをさせない(validation評価をさせない)のか目的と思われます。

投稿2020/05/10 08:59

BlueMoon

総合スコア1339

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

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

JiN4

2020/05/10 17:06 編集

なるほど! つまるところname.errorsがnullではないことが、name.errors.requiredなどを参照する前提条件なのですね。 なので最初にname.errorsの中身を確かめるためにわざわざ「name.errors != null」を記述していると。 スッキリしました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問