Angular 表单输入值未定义
Angular form input value undefined
我试图在我的第一个 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);
}
}
知道这是为什么吗?
您需要用 ngModel
标记输入,这样 angular 就会知道这是表单的控件之一:
<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"
)就足够了。
像这样的一些应该可以..
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);
}
}
我试图在我的第一个 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);
}
}
知道这是为什么吗?
您需要用 ngModel
标记输入,这样 angular 就会知道这是表单的控件之一:
<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"
)就足够了。
像这样的一些应该可以..
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);
}
}