web-dev-qa-db-ja.com

Angularフォーム入力値が未定義

初めての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);    
  }
}

これがなぜであるかについてのアイデアはありますか？

formsangulartypescriptangular4-forms
4
Draxy

入力をngModelでマークする必要があるため、angularは、これがフォームのコントロールの1つであることがわかります。

_<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"_のみ）で十分な場合があります。

6
Martin Adámek

このようなものはうまくいくはずです。

モデルについて読みたいかもしれません binding と forms 。

htmlコンポーネント

<form #searchValue='ngForm' class="some-css-class" (ngSubmit)='submitSearch()'>
  <div>
    <input type="text" name="q" [(ngModel)]="searchValue" placeholder="search">
    <input type="submit" name="btn" placeholder="Submit">
  </div>
</form>

component.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 {

  searchValue: string = '';

  constructor() { }

  ngOnInit() { }

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