【Angular】constructorとngOnInitの違いについて(初期化エラー)

Question

状況

現在、Angularチュートリアル等でフォームについて学習している初学者です。
constructorとngOnInitの違いについて、なかなか腑に落ちないので、アドバイスいただければ幸いです。

やろうとしていること

こちらのリンクのカスタムバリデーションを自分のローカル環境でも実装してみました。
https://stackblitz.com/edit/angular-u1a86m?file=src%2Fapp%2Fapp.component.ts

とりあえず、完コピしてみたのですが、Property 'form' has no initializer and is not definitely assigned in the constructor.というエラーが出てしまいます。

コンストラクターで初期化出来ていないというエラーだと思い、ngOnInit()に書かれている処理を全てconstructorに移動しました。そうすると、問題なく動作し、上記リンクとstackblitzと同じ挙動で動いています。

コード

// test.component.ts
import { Component, OnInit } from '@angular/core';
import {
  FormGroup,
  FormControl,
  FormBuilder,
  Validators,
  AbstractControl,
} from '@angular/forms';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
  form: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.form = this._buildForm();
  }

  ngOnInit() {
    // this.form = this._buildForm(); stackblitzはここで初期化している。
  }

  submit(form: FormGroup) {
    console.log(form);
  }

  get phonenumber() {
    return <FormControl>this.form.get('phonenumber');
  }

  private _buildForm(): FormGroup {
    return this._fb.group({
      phonenumber: ['', [Validators.required, parseToNumberValidator]],
    });
  }
}
function parseToNumberValidator(formControl: AbstractControl) {
  const val = formControl.value;
  return isNaN(Number(val)) ? { parseToNumberValidator: true } : null;
}

// test.component.ts
<p>Start editing to see some magic happen :)</p>
<form [formGroup]="form" (submit)="submit(form)">
  <div>
    <label>
      phone number
      <input type="text" formControlName="phonenumber" *ngIf="phonenumber" />
    </label>
    <ng-container
      *ngIf="phonenumber.invalid && (phonenumber.touched || phonenumber.dirty)"
    >
      <p *ngIf="phonenumber.hasError('required')">必須項目です</p>
      <p *ngIf="phonenumber.hasError('parseToNumberValidator')">半角数字のみ</p>
    </ng-container>
  </div>
  <div>
    <button type="submit">send</button>
  </div>
</form>

わからないこと

・なぜ、上記リンクのstackblitzはconstructorで初期化していないのにエラーがでないのか。
（自分のローカル環境だけエラーになるのはなぜか）
・ngOnInitとconstructorをどう使い分けたらよいかわからない。

環境的な要素が原因で、エラーとなっているのでしょうか。
ng newで新規プロジェクトを作成し、同様のことをしてもやはり同じ状況になってしまいます。
どういったところに原因がありそうか、アドバイス頂けると幸いです。
(teratail内で似たような質問をしてしまっています…すみません…)

Answer 1

ts.config.json の設定ではないかと思います。
ts.config.json の "angularCompilerOptions" で
"strictPropertyInitialization": true
を指定していると、 form を ngOnInit で初期化した際にエラーになります。

Angular におけるコンポーネントクラスの処理順は、
１．constructor 実行、フィールド変数の初期化
２．親コンポーネントから @Input を渡す
３．ngOnInit 実行
４．コンポーネントの描画
５．ngAfterViewInit 実行
となっています。（ ngOnChanges については省略）
Angular のコンポーネントの初期化処理を ngOnInit で行うように推奨されているのは、上記２によるところが大きいです。
つまり、親コンポ―ネントから値を渡す場合と渡さない場合で、初期化処理を constructor に書くのか ngOnInit に書くのか分けるのはあまりよくないよね、それなら親から値を渡してようが渡してまいが、 ngOnInit に書けば統一が取れるよね、という考えです。

次に ts.config.json では TypeScript をトランスパイルする設定を記述しています。
strictPropertyInitialization オプションはその名の通り、コンストラクタ実行後に初期化されてないフィールド変数を許す/許さないの設定です。
Angular12 からは Angular CLI で ng new するとデフォルトで Strict モードが true になるようになりました。Strict モードが true のとき、strictPropertyInitialization オプションは有効です。フィールド変数がコンストラクタ実行後に初期化されていない場合はエラーになります。

提示されている stackblitz の Angular バージョンは7です。まだデフォルトで Strict モードは false です。
対して質問者様の Angular バージョンは12以上なのではないでしょうか？（または ng new 時に --strict を指定しているか）
この環境の違いが、エラーが発生する/しないを左右しているのだと思います。

解決方法としては、フィールド変数 form の記述を変更することです。

方法１　form?: FormGroup にする
省略可能なプロパティとしてしまえば、strictPropertyInitialization オプションが有効になっていてもエラー発生しません。
ngOnInit で初期化することができます。

方法２　form!: FormGroup にする
こちらの方が有力です。Non-Nullアサーションパラメータを使って、Null にはならないことを明示します。
こちらもstrictPropertyInitialization オプションが有効になっていても ngOnInit で初期化することができます。
今回の場合、 form が NULL になることはないのでこちらの方が適切です。

Comments

[tonkotsu_ramen]

ご丁寧にご回答頂きありがとうございます！
こちらからもいくつか回答させていただきます。

・angularのバージョンは12です。
・書き漏れていましたが、`strictPropertyInitialization `は`false`にしていても状況変わりませんでした。

上記の方法2でエラーは解消されました。angularのコンポーネントの処理手順について、もっと深掘りして勉強してみます。本当にありがとうございます。

[gekijin]

・書き漏れていましたが、`strictPropertyInitialization `は`false`にしていても状況変わりませんでした。

おや、私の環境ではこのオプションを変更すると明確に挙動に違いが出ます。
tsconfig.json を書き換えた後は、一旦 ng serve を止めて ng serve をやり直さないと変更が反映されないようですが、いかがでしょうか。