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

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

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

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

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

tonkotsu_ramen
tonkotsu_ramen

総合スコア0

Angular

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0評価

0クリップ

1190閲覧

投稿2021/08/22 11:39

編集2022/01/12 10:58

現在、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と同じ挙動で動いています。

コード

typescript

// 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; }

typescript

// 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内で似たような質問をしてしまっています…すみません…)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Angular

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。