イントロ
ngForm内に、別コンポーネントで定義したテキストフィールドや、セレクトボックスを含めると、Sendボタンで送信するときに、valueを取得できないという問題に直面した。
開発環境
Angular@2.4.1
typescript@2.0.10
デモアプリケーション
テキストフィールドは、ngFormと別コンポーネントで定義している
コンソールを見ると、別コンポーネントで定義しているテキストフィールドのvalueも取得できていることがわかる
ngDefaultControlで解決
ngDefaultControlを入れたら解決した。理屈はわかってないので、後で調べる。
- src/app/app.component.html
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate> <div class="form-box"> <input-text name="text1" [(ngModel)]="text1" ngDefaultControl></input-text> <input-text name="text2" [(ngModel)]="text2" ngDefaultControl></input-text> <input-text name="text3" [(ngModel)]="text3" ngDefaultControl></input-text> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
- src/components/input-text/input-text.component.ts
import { Component, Input } from '@angular/core'; import { NgForm } from '@angular/forms'; @Component({ selector: 'input-text', template: ` <input type="text" class="form-control" [(ngModel)]="value">`, styleUrls: ['./input-text.component.scss'] }) export class InputTextComponent { }
上記ソースコードは、下記URLに格納してます。