前提・実現したいこと
私は「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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/10 17:06 編集