Angularのvalidationについての疑問

Question

前提・実現したいこと

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

該当のソースコード

  <form [(formGroup)]="myControl" (ngSubmit)="onSubmit()">
    <table>
      <tr>
        <th>Name</th>
        <td>
          <!--
          name.errors != nullがない場合、正常に動かないがその理由が分からない。
          name.errors.required、name.errors.alpha、どちらかが「!= null」の場合、「name.errors != null」は確定ではないのか。
          確定ならばname.errors != nullの記述の必要性が分からない。
          -->
          <div *ngIf="name.errors != null && name.errors.required != null">Nameは必須項目です。</div>
          <div *ngIf="name.errors != null && name.errors.alpha != null">半角アルファベッドで入力してください。</div>
          <div><input type="text" formControlName="name"></div>
        </td>
      </tr>
      <tr>
        <th>Mail</th>
        <td>
          <!--
          mail.errors != nullを削除した場合、次のフォームであるageに関するバリデーションエラーの警告文が表示されなくなるのが何故か分からない。
          -->
          <div *ngIf="mail.errors != null && mail.errors.email != null">メールアドレスの形式で入力してください</div>
          <div><input type="text" formControlName="mail"></div>
        </td>
      </tr>
      <tr>
        <th>age</th>
        <td>
          <div *ngIf="age.errors != null && age.errors.min != null">1歳以上で入力してください。</div>
          <div *ngIf="age.errors != null && age.errors.max != null">150歳以下で入力してください。</div>
          <div *ngIf="age.errors != null && age.errors.even != null">偶数で入力してください。</div>
          <div><input type="number" formControlName="age"></div>
        </td>
      </tr>
      <tr>
        <th></th>
        <td>
          <input [disabled]="myControl.invalid" type="submit" value="click">
        </td>
      </tr>
    </table>
  </form>

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

function alpha(c: FormControl) {
  let REGPATTERN = /^[a-zA-Z]+$/;
  if (REGPATTERN.test(c.value)) {
    return null;
  } else {
    return { alpha: { valid: false } };
  }
}

function even(c: FormControl) {
  return c.value % 2 == 0 ? null : { even: { valid: false } }
}

@Component({
  selector: 'app-hello',
  styleUrls: ['./hello.component.css'],
  templateUrl: './hello.component.html'
})
export class HelloComponent implements OnInit {
  title: string;
  message: string;
  myControl: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.title = 'Hello-app'
    this.message = 'FormBuilderを使う'
    this.myControl = this.fb.group({
      name: ['', [Validators.required, alpha]],
      mail: ['', [Validators.email]],
      age: [0, [Validators.min(1), Validators.max(150), even]]
    });
  }

  get name() { return this.myControl.get('name'); }
  get mail() { return this.myControl.get('mail'); }
  get age() { return this.myControl.get('age'); }

  onSubmit() {
    if (this.myControl.invalid) {
      this.message = 'VALIDATION ERROR'
    } else {
      let result = this.myControl.value;
      this.message = JSON.stringify(result);
    }
  }
}

Answer 1

こんにちは。

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

Comments

[JiN4]

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