Angular 2 :提交时将所有表单字段放入json对象中
Angular 2 :put all form fields in json object when submitted
我有一个包含多个字段的表单,我想在提交时检索数据。
这是 component.html :
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku</h2>
<form #f="ngForm"
(ngSubmit)="onSubmit(f.value)"
class="ui form">
<div class="field">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
</div>
<div class="field">
<label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select1" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select2" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select3" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
这里是 component.ts:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-post-history',
templateUrl: './post-history.component.html',
styleUrls: ['./post-history.component.css']
})
export class PostHistoryComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
onSubmit(form: any): void {
console.log('you submitted value:', form);
}
}
在控制台日志中,它只显示文本输入和一个 select 值!
您的所有 select
元素都具有与 "note" 相同的 name
属性。您可以更改它们以匹配元素的 ID:
<select class="form-control" name="note1" id="select1" ngModel>
<select class="form-control" name="note2" id="select2" ngModel>
// etc
我有一个包含多个字段的表单,我想在提交时检索数据。
这是 component.html :
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku</h2>
<form #f="ngForm"
(ngSubmit)="onSubmit(f.value)"
class="ui form">
<div class="field">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
</div>
<div class="field">
<label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select1" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select2" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label>
<select class="form-control" name="note" id="select3" ngModel>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
这里是 component.ts:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-post-history',
templateUrl: './post-history.component.html',
styleUrls: ['./post-history.component.css']
})
export class PostHistoryComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
onSubmit(form: any): void {
console.log('you submitted value:', form);
}
}
在控制台日志中,它只显示文本输入和一个 select 值!
您的所有 select
元素都具有与 "note" 相同的 name
属性。您可以更改它们以匹配元素的 ID:
<select class="form-control" name="note1" id="select1" ngModel>
<select class="form-control" name="note2" id="select2" ngModel>
// etc