Return 多个对象 Angular 2 种形式
Return multiple objects Angular 2 forms
我是新手angular 2. 上传两个或多个文档时,它会列在模板中。列出的文档的每一行都有用于输入附加信息的输入槽。提交时,仅在文档列表的最后一行输入的值被 return 编辑为对象。我希望对文档列表中输入的所有行的值进行 returned。下面是我的代码
模板
<h1 class="separator">Manage Documents</h1>
<!-- in transit -->
<div class="row">
<div class="col-xs-2">
<input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
<label for="uploadFile" class="btn btn-primary">Upload Documents</label>
</div>
<div class="col-xs-6">
<input type="button" value="Select Truck To Send Document" class="btn btn-primary" data-toggle="modal" data-target="#selectTruck">
</div>
</div>
<table cellpadding="4" class="grid" >
<thead><tr><th>Document Name</th><th>Document ID</th><th>Document Type</th><th>Source</th>
<th>Document Date</th><th>Trip ID</th><th>Notes</th><th>Action</th></tr></thead>
<form [ngFormModel]="myform" (ngSubmit)="onSubmit(myform.value)">
<tbody *ngFor="let file of files">
<tr >
<td class="form-group" >{{file.name}}</td>
<td class="form-group"><input type="text" class="form-control" ngControl="documentId" #documentId="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="type" #type="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="source" #source="ngForm"></td>
<td class="form-group"><input type="date" class="form-control" ngControl="date" #date="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="tripId" #tripId="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="notes" #notes="ngForm"></td>
<td class="form-group">
<a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
<!-- save button -->
<button type="submit" class="form-group" class="btn btn-primary " >Save</button>
</form>
组件
import {Component, OnInit, OnChanges} from '@angular/core';
import {NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '@angular/common';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {FleetService} from '../../fleet/fleetControlPanel/fleetControlPanelService';
import {DocumentManagementService} from './documentManagementService';
@Component({
selector: 'documentManagement',
templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html',
directives: [ROUTER_DIRECTIVES, NgClass, FORM_DIRECTIVES ]
})
export class DocumentManagementComponent implements OnInit, OnChanges {
myform: ControlGroup;
file: any[];
files: any[] = [];
trucks: any[];
errorMessage: any;
checked: boolean ;
// constructor to loop the products in product service file and disply in html
constructor(private _fleetService: FleetService, private _documentManagementService: DocumentManagementService,
_formBuilder: FormBuilder){
this.myform = _formBuilder.group({
'documentId': [],
'type': [],
'source': [],
'date': [],
'tripId': [],
'notes': []
})
}
ngOnInit(): void {
}
ngOnChanges(): void {
}
onClickUploadDocument(event){
console.log("clicked")
let fileList: FileList = event.target.files;
console.log("file: ",fileList);
for (let i = 0; i < fileList.length; i++) {
var files = fileList[i];
console.log("files are: ",files);
this.files.push(files);
}
}
remove(file: any){
console.log("delete file:..", file)
var index = this.files.indexOf(file);
this.files.splice(index, 1)
console.log("total files in list:..", this.files)
}
onSubmit (documents: any) {
console.log("returned objects are:..", documents)
}
}
有人可以帮助我如何 return 为所有文档输入槽输入值。谢谢。
每一行都绑定到同一个控件实例。您需要将每个绑定到它们自己的实例。
<tbody *ngFor="let file of files let i=index">
<tr >
<td>{{file.name}}</td>
<td><input type="text" ngControl="documentId{{i}}" #documentId="ngForm"></td>
<td><input type="text" ngControl="type{{i}}" #type="ngForm"></td>
<td><input type="text" ngControl="source{{i}}" #source="ngForm"></td>
<td><input type="date" ngControl="date{{i}}" #date="ngForm"></td>
<td><input type="text" ngControl="tripId{{i}}" #tripId="ngForm"></td>
<td><input type="text"ngControl="notes{{i}}" #notes="ngForm"></td>
<td>
<a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
this.myform = _formBuilder.group({
})
this.files.forEach((f, i) => {
this.myForm.addControl('documentId' + i, new Control()),
this.myForm.addControl('type' + i, new Control()),
this.myForm.addControl('source' + i, new Control()),
this.myForm.addControl('date' + i, new Control()),
this.myForm.addControl('tripId' + i, new Control()),
this.myForm.addControl('notes' + i, new Control()),
})
当 this.files
更新(添加或删除项目)时,this.form
也需要更新。
您可以考虑将每一行包装在一个组件中,并将其用作控件以简化代码。该组件需要实现 ControlValueAccessor
,如
中所示
我是新手angular 2. 上传两个或多个文档时,它会列在模板中。列出的文档的每一行都有用于输入附加信息的输入槽。提交时,仅在文档列表的最后一行输入的值被 return 编辑为对象。我希望对文档列表中输入的所有行的值进行 returned。下面是我的代码
模板
<h1 class="separator">Manage Documents</h1>
<!-- in transit -->
<div class="row">
<div class="col-xs-2">
<input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
<label for="uploadFile" class="btn btn-primary">Upload Documents</label>
</div>
<div class="col-xs-6">
<input type="button" value="Select Truck To Send Document" class="btn btn-primary" data-toggle="modal" data-target="#selectTruck">
</div>
</div>
<table cellpadding="4" class="grid" >
<thead><tr><th>Document Name</th><th>Document ID</th><th>Document Type</th><th>Source</th>
<th>Document Date</th><th>Trip ID</th><th>Notes</th><th>Action</th></tr></thead>
<form [ngFormModel]="myform" (ngSubmit)="onSubmit(myform.value)">
<tbody *ngFor="let file of files">
<tr >
<td class="form-group" >{{file.name}}</td>
<td class="form-group"><input type="text" class="form-control" ngControl="documentId" #documentId="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="type" #type="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="source" #source="ngForm"></td>
<td class="form-group"><input type="date" class="form-control" ngControl="date" #date="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="tripId" #tripId="ngForm"></td>
<td class="form-group"><input type="text" class="form-control" ngControl="notes" #notes="ngForm"></td>
<td class="form-group">
<a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
<!-- save button -->
<button type="submit" class="form-group" class="btn btn-primary " >Save</button>
</form>
组件
import {Component, OnInit, OnChanges} from '@angular/core';
import {NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '@angular/common';
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {FleetService} from '../../fleet/fleetControlPanel/fleetControlPanelService';
import {DocumentManagementService} from './documentManagementService';
@Component({
selector: 'documentManagement',
templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html',
directives: [ROUTER_DIRECTIVES, NgClass, FORM_DIRECTIVES ]
})
export class DocumentManagementComponent implements OnInit, OnChanges {
myform: ControlGroup;
file: any[];
files: any[] = [];
trucks: any[];
errorMessage: any;
checked: boolean ;
// constructor to loop the products in product service file and disply in html
constructor(private _fleetService: FleetService, private _documentManagementService: DocumentManagementService,
_formBuilder: FormBuilder){
this.myform = _formBuilder.group({
'documentId': [],
'type': [],
'source': [],
'date': [],
'tripId': [],
'notes': []
})
}
ngOnInit(): void {
}
ngOnChanges(): void {
}
onClickUploadDocument(event){
console.log("clicked")
let fileList: FileList = event.target.files;
console.log("file: ",fileList);
for (let i = 0; i < fileList.length; i++) {
var files = fileList[i];
console.log("files are: ",files);
this.files.push(files);
}
}
remove(file: any){
console.log("delete file:..", file)
var index = this.files.indexOf(file);
this.files.splice(index, 1)
console.log("total files in list:..", this.files)
}
onSubmit (documents: any) {
console.log("returned objects are:..", documents)
}
}
有人可以帮助我如何 return 为所有文档输入槽输入值。谢谢。
每一行都绑定到同一个控件实例。您需要将每个绑定到它们自己的实例。
<tbody *ngFor="let file of files let i=index">
<tr >
<td>{{file.name}}</td>
<td><input type="text" ngControl="documentId{{i}}" #documentId="ngForm"></td>
<td><input type="text" ngControl="type{{i}}" #type="ngForm"></td>
<td><input type="text" ngControl="source{{i}}" #source="ngForm"></td>
<td><input type="date" ngControl="date{{i}}" #date="ngForm"></td>
<td><input type="text" ngControl="tripId{{i}}" #tripId="ngForm"></td>
<td><input type="text"ngControl="notes{{i}}" #notes="ngForm"></td>
<td>
<a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
this.myform = _formBuilder.group({
})
this.files.forEach((f, i) => {
this.myForm.addControl('documentId' + i, new Control()),
this.myForm.addControl('type' + i, new Control()),
this.myForm.addControl('source' + i, new Control()),
this.myForm.addControl('date' + i, new Control()),
this.myForm.addControl('tripId' + i, new Control()),
this.myForm.addControl('notes' + i, new Control()),
})
当 this.files
更新(添加或删除项目)时,this.form
也需要更新。
您可以考虑将每一行包装在一个组件中,并将其用作控件以简化代码。该组件需要实现 ControlValueAccessor
,如