Angular v20 の**推奨スタイル（Signals／inject／toSignal／ライフサイクル不要）**で書き直すと、
以下のように class コンストラクタをやめて inject() を使い、OnInit を外し、valueChanges を toSignal に変換して effect で emit する構成がベスト。

⸻

✅ v20 推奨構成で書き換えたコード（最小・最もきれい）

ポイント：
• inject(FormBuilder) を使用（constructor 要らない）
• OnInit 廃止 → effect() で自動購読
• valueChanges を toSignal() で安全にシグナル化
• effect() 内で @Output() を emit
• FormGroup の型は NonNullable で安全に

⸻

child-form.component.ts（v20推奨版）

import { Component, Output, EventEmitter, effect, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
import { toSignal } from '@angular/core/rxjs-interop';

export type ChildFormValue = {
userName: string;
passWord: string;
};

@Component({
standalone: true,
selector: 'app-child-form',
imports: [ReactiveFormsModule],
template: <form [formGroup]="form"> <input formControlName="userName" placeholder="userName" /> <input formControlName="passWord" placeholder="passWord" /> </form>,
})
export class ChildFormComponent {
@Output() formChange = new EventEmitter();

private readonly fb = inject(FormBuilder);

// 型安全な FormGroup（NonNullable）
readonly form: FormGroup = this.fb.group({
userName: this.fb.nonNullable.control(''),
passWord: this.fb.nonNullable.control(''),
});

// valueChanges → signal 化（購読解除不要）
private readonly formValueSignal = toSignal(this.form.valueChanges, {
initialValue: this.form.getRawValue(),
});

constructor() {
// valueChanges の変化を自動検知して EventEmitter へ流す（OnInit不要）
effect(() => {
const v = this.formValueSignal();
this.formChange.emit(v);
});
}
}

⸻

✨ この書き方が「v20 推奨」な理由

✅ 1. constructor → inject() に置き換え

Angular v14〜で導入、v16〜推奨 → v20 はもはや標準。

✅ 2. ngOnInit を削除

valueChanges.subscribe() は手動 unsubscribe 必須。
toSignal() + effect() を使えば Angular が自動でライフサイクル管理する。

✅ 3. FormGroup の型安全性 UP

this.fb.nonNullable.control('')

により、string | null を避ける。

✅ 4. EventEmitter を発火する最小のパターン

effect() のみで OK
→ クリーンで subscription もない。

⸻

📌 完全に “今の Angular” の書き方

これが Angular v20〜v21 の公式推奨スタイルで、Signals との親和性が一番高い。

⸻

必要なら、これを使った「親側のシグナル同期コード」も書くよ

たとえば：

onFormChange(v: ChildFormValue) {
this.state.update(prev => ({ ...prev, form: v }));
}

みたいなやつ。