Question

入力フィールドの値を最初のAngularフォームで取得しようとしていますが、それは常に定義されていません。私はFormsModuleを正しくインポートしています。フォームオブジェクトをうまく参照することができます。そのため、明らかに何かが欠けているはずです。

マイコンポーネントのHTML

<form #searchValue='ngForm' class="" (ngSubmit)='submitSearch(searchValue)'> 
    <div> 
    <input type="text" name="q" placeholder="search"> 
    </div> 
</form> 

そして、私のコンポーネントのts法（短縮）

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'google-search', 
    templateUrl: './google.component.html', 
    styleUrls: ['./google.component.css'] 
}) 

export class GoogleComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 

    } 

    submitSearch(formData) { 
    console.log(this.searching); 
    console.log(formData.value.q);  
    } 
} 

任意のアイデアこれはなぜか？

Answer 1

あなたは、これがフォームのコントロールのいずれかであることを知っていますので、角ngModelで入力をマークする必要があります。

<input type="text" ngModel name="q" placeholder="search"> 

それとも、あなたのコンポーネントで最初の変数を定義し、次にを経由して、それに入力をバインドすることができます[(ngModel)]ディレクティブ：

export class GoogleComponent implements OnInit { 
    q: string; 

    submitSearch() { 
    console.log(this.q); 
    } 
} 

<form class="" (ngSubmit)='submitSearch()'> 
    <div> 
    <input type="text" name="q" [(ngModel)]="q" placeholder="search"> 
    </div> 
</form> 

一つの方法バインディングあなただけの入力から値を読みたい場合は（ちょうど[ngModel]="q"）十分である可能性があります。

Answer 2

このようないくつかが動作するはずです。..

はたぶん、あなたはモデルbindingとformsについて読みたいです。 component.tsフォームを提出されたhtml要素を入れている

import { Component, OnInit } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'google-search', 
    templateUrl: './google.component.html', 
    styleUrls: ['./google.component.css'] 
}) 

export class GoogleComponent implements OnInit { 

    searchValue: string = ''; 

    constructor() { } 

    ngOnInit() { } 

    submitSearch() { 
    console.log(this.searchValue); 
    } 
}