中安拓也のブログ

プログラミングについて書くブログ

ngForm内に別ComponentのFormを含めるとvalueが取得できない

イントロ

ngForm内に、別コンポーネントで定義したテキストフィールドや、セレクトボックスを含めると、Sendボタンで送信するときに、valueを取得できないという問題に直面した。

開発環境

  • Angular@2.4.1

  • typescript@2.0.10

デモアプリケーション

  • テキストフィールドは、ngFormと別コンポーネントで定義している

  • コンソールを見ると、別コンポーネントで定義しているテキストフィールドのvalueも取得できていることがわかる

f:id:l08084:20161231221509p:plain

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に格納してます。

github.com