使用FormArray在saveRow（）中传递数据？
＆GT; ## app.component.ts ##
单击SAve按钮时，出现错误，ERROR TypeError：无法读取未定义的属性“值”
在第二行传递addRow（name.value）时效果很好。但是，当我通过它时，第一行是saveRow（name.value）。!!! ERROR TypeError：无法读取未定义的属性'value'.....................我也尝试过saveRow（name）而不是错误，但是传递的值是未定义的！< / p>
<div class="container">
<div class="row">
<form [formGroup]="form1">
<div class="form-group">
<table class="table">
<thead>
<tr>
<td>S.No</td>
<td>NAME</td>
<td>WEIGHT(in grams)</td>
<td>QUANTITY</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of form1.get('id').value; let k = index">
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('id').value[k] }}</ng-container>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('name').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('name').value[k]" #name>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('weight').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('name').value[k]" #weight>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('quantity').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('quantity').value[k]" #quantity>
</td>
<td>
<ng-container *ngIf="tempindex === k">
<button *ngIf="editclicked" class="btn btn-primary" (click)="saveRow(k, name.value, weight.value, quantity.value)">Save</button>
</ng-container>
<button *ngIf="!editclicked" class="btn btn-primary" (click)="editRow(k)">Edit</button>
<button *ngIf="!editclicked" class="btn btn-danger" (click)="delRow(k)">Delete</button>
</td>
</tr>
<button *ngIf="!addclicked" class="btn btn-default" (click)="addRow()">ADD</button>
<tr *ngIf="addclicked">
<td></td>
<td>
<input type="text" #name>
</td>
<td>
<input type="text" #weight>
</td>
<td>
<input type="text" #quantity>
</td>
<td><button class="btn btn-primary" (click)="hitadd(name.value, weight.value, quantity.value)">Add</button>
<button class="btn btn-danger" (click)="hitcancel()">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
app.component.html
第一个tr用于从FormArrays中获取所有字段
第二个tr用于向FormArrays添加新数据（问题!!!）
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'
import { element } from 'protractor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
form1: FormGroup;
addclicked = false;
tempId = '';
tempindex;
editclicked = false;
ngOnInit() {
this.form1 = new FormGroup({
'id': new FormArray([]),
'name': new FormArray([]),
'weight': new FormArray([]),
'quantity': new FormArray([])
// 'id': new FormArray([new FormControl('1'), new FormControl('2')]),
// 'name': new FormArray([new FormControl('Beans'), new FormControl('Soup')]),
// 'weight': new FormArray([new FormControl('100'), new FormControl('125')]),
// 'quantity': new FormArray([new FormControl('60'), new FormControl('20')])
});
}
addRow(){
this.addclicked = true;
this.tempId = '';
}
hitcancel(){
this.addclicked = false;
this.tempId = '';
}
hitadd(name, weight, quantity){
this.tempId = (this.ids.value.length + 1).toString(10);
this.ids.push(new FormControl(this.tempId));
this.names.push(new FormControl(name));
this.weights.push(new FormControl(weight));
this.quantities.push(new FormControl(quantity));
this.tempId = '';
this.addclicked = false;
}
editRow(index: number){
this.editclicked = true;
this.tempindex = index;
//this.ids.at(index).patchValue(null);
}
saveRow(index, name, weight, quantity){
this.editclicked = false;
this.tempindex = undefined;
console.log(name);
// console.log(this.names.at(index).setValue(name));
// this.weights.at(index).setValue(weight);
// this.quantities.at(index).setValue(quantity);
}
delRow(index: number){
this.addclicked = false;
this.ids.removeAt(index);
this.names.removeAt(index);
this.weights.removeAt(index);
this.quantities.removeAt(index);
let i = 0;
this.ids.controls.forEach(element => {
i++;
element.setValue(i.toString(10))
});
}
get ids(){
return this.form1.get('id') as FormArray;
}
get names(){
return this.form1.get('name') as FormArray;
}
get weights(){
return this.form1.get('weight') as FormArray;
}
get quantities(){
return this.form1.get('quantity') as FormArray;
}
}
<!-- end snippet -->
1 个答案:
答案 0 :(得分：0)
我已经更新了上面的代码，但根据我的预期发出了非重要元素。请看一下。
以下是修改：
<强> app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'
import { element } from 'protractor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
form1: FormGroup;
addclicked = false;
tempId = '';
ngOnInit() {
this.form1 = new FormGroup({
'id': new FormArray([]),
'name': new FormArray([]),
'weight': new FormArray([]),
'quantity': new FormArray([])
// 'id': new FormArray([new FormControl('1'), new FormControl('2')]),
// 'name': new FormArray([new FormControl('Beans'), new FormControl('Soup')]),
// 'weight': new FormArray([new FormControl('100'), new FormControl('125')]),
// 'quantity': new FormArray([new FormControl('60'), new FormControl('20')])
});
}
addRow(){
this.addclicked = true;
this.tempId = '';
}
hitcancel(){
this.addclicked = false;
this.tempId = '';
}
hitadd(name, weight, quantity){
this.tempId = (this.ids.value.length + 1).toString(10);
this.ids.push(new FormControl(this.tempId));
this.names.push(new FormControl(name));
this.weights.push(new FormControl(weight));
this.quantities.push(new FormControl(quantity));
this.tempId = '';
this.addclicked = false;
}
editRow(index: number){
}
delRow(index: number){
this.ids.removeAt(index);
this.names.removeAt(index);
this.weights.removeAt(index);
this.quantities.removeAt(index);
let i = 0;
this.ids.controls.forEach(element => {
i++;
element.setValue(i.toString(10))
});
}
get ids(){
return this.form1.get('id') as FormArray;
}
get names(){
return this.form1.get('name') as FormArray;
}
get weights(){
return this.form1.get('weight') as FormArray;
}
get quantities(){
return this.form1.get('quantity') as FormArray;
}
}
<强> app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<强> app.component.html
<div class="container">
<div class="row">
<form [formGroup]="form1">
<div class="form-group">
<table class="table">
<thead>
<tr>
<td>S.No</td>
<td>NAME</td>
<td>WEIGHT(in grams)</td>
<td>QUANTITY</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of form1.get('id').value; let k = index">
<td>{{ form1.get('id').value[k] }}</td>
<td>{{ form1.get('name').value[k] }}</td>
<td>{{ form1.get('weight').value[k] }}</td>
<td>{{ form1.get('quantity').value[k] }}</td>
<td><button class="btn btn-primary" (click)="editRow(k)">Edit</button> <button class="btn btn-danger"
(click)="delRow(k)">Delete</button></td>
</tr>
<button *ngIf="!addclicked" class="btn btn-default" (click)="addRow()">ADD</button>
<tr *ngIf="addclicked">
<td></td>
<td>
<input type="text" #name>
</td>
<td>
<input type="text" #weight>
</td>
<td>
<input type="text" #quantity>
</td>
<td><button class="btn btn-primary" (click)="hitadd(name.value, weight.value, quantity.value)">Add</button>
<button
class="btn btn-danger" (click)="hitcancel()">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
根据您所经历的代码修改，尝试查看这是否修复了您所获得的错误，
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('id').value[k] }}</ng-container>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('name').value[k]}}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('name').value[k]" #nameEdit>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('weight').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('name').value[k]" #weightEdit>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('quantity').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [value]="form1.get('quantity').value[k]" #quantityEdit>
</td>
<td>
<ng-container *ngIf="tempindex === k">
<button *ngIf="editclicked" class="btn btn-primary" (click)="saveRow(k, nameEdit.value, weightEdit.value, quantityEdit.value)">Save</button>
</ng-container>
<button *ngIf="!editclicked" class="btn btn-primary" (click)="editRow(k)">Edit</button>
<button *ngIf="!editclicked" class="btn btn-danger" (click)="delRow(k)">Delete</button>
</td>
在您的组件中，
saveRow(index: number, name, weight, quantity){
this.names.at(index).setValue(name));
this.weights.at(index).setValue(weight);
this.quantities.at(index).setValue(quantity);
this.editclicked = false;
this.tempindex = undefined;
}
<强>模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<强>模板
<div class="container">
<div class="row">
<form [formGroup]="form1">
<div class="form-group">
<table class="table">
<thead>
<tr>
<td>S.No</td>
<td>NAME</td>
<td>WEIGHT(in grams)</td>
<td>QUANTITY</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of form1.get('id').value; let k = index">
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('id').value[k] }}</ng-container>
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('name').value[k]}}</ng-container>
<input type="text" *ngIf="tempindex === k" [(ngModel)]="tempName" [ngModelOptions]="{standalone: true}">
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('weight').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [(ngModel)]="tempWeight" [ngModelOptions]="{standalone: true}">
</td>
<td>
<ng-container *ngIf="tempindex !== k">{{ form1.get('quantity').value[k] }}</ng-container>
<input type="text" *ngIf="tempindex === k" [(ngModel)]="tempQuantity" [ngModelOptions]="{standalone: true}">
</td>
<td>
<ng-container *ngIf="tempindex === k">
<button *ngIf="editclicked" class="btn btn-primary" (click)="saveRow(k, tempName, tempWeight, tempQuantity)">Save</button>
</ng-container>
<button *ngIf="!editclicked" class="btn btn-primary" (click)="editRow(k)">Edit</button>
<button *ngIf="!editclicked" class="btn btn-danger" (click)="delRow(k)">Delete</button>
</td>
</tr>
<button *ngIf="!addclicked" class="btn btn-default" (click)="addRow()">ADD</button>
<tr *ngIf="addclicked">
<td></td>
<td>
<input type="text" #name>
</td>
<td>
<input type="text" #weight>
</td>
<td>
<input type="text" #quantity>
</td>
<td><button class="btn btn-primary" (click)="hitadd(name.value, weight.value, quantity.value)">Add</button>
<button class="btn btn-danger" (click)="hitcancel()">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
<强>组件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms'
import { element } from 'protractor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
form1: FormGroup;
addclicked = false;
tempId = '';
tempName = '';
tempWeight = '';
tempQuantity = '';
tempindex;
editclicked = false;
ngOnInit() {
this.form1 = new FormGroup({
'id': new FormArray([]),
'name': new FormArray([]),
'weight': new FormArray([]),
'quantity': new FormArray([])
// 'id': new FormArray([new FormControl('1'), new FormControl('2')]),
// 'name': new FormArray([new FormControl('Beans'), new FormControl('Soup')]),
// 'weight': new FormArray([new FormControl('100'), new FormControl('125')]),
// 'quantity': new FormArray([new FormControl('60'), new FormControl('20')])
});
}
addRow(){
this.addclicked = true;
this.tempId = '';
}
hitcancel(){
this.addclicked = false;
this.tempId = '';
}
hitadd(name, weight, quantity){
this.tempId = (this.ids.value.length + 1).toString(10);
this.ids.push(new FormControl(this.tempId));
this.names.push(new FormControl(name));
this.weights.push(new FormControl(weight));
this.quantities.push(new FormControl(quantity));
this.tempId = '';
this.addclicked = false;
console.log(this.form1);
}
editRow(index: number) {
this.tempName = this.names.value[index];
this.tempWeight = this.weights.value[index];
this.tempQuantity = this.quantities.value[index];
this.editclicked = true;
this.tempindex = index;
//this.ids.at(index).patchValue(null);
}
saveRow(index: number, name, weight, quantity){
this.names.at(index).setValue(name);
this.weights.at(index).setValue(weight);
this.quantities.at(index).setValue(quantity);
this.editclicked = false;
this.tempindex = undefined;
}
delRow(index: number){
this.addclicked = false;
this.ids.removeAt(index);
this.names.removeAt(index);
this.weights.removeAt(index);
this.quantities.removeAt(index);
let i = 0;
this.ids.controls.forEach(element => {
i++;
element.setValue(i.toString(10))
});
}
get ids(){
return this.form1.get('id') as FormArray;
}
get names(){
return this.form1.get('name') as FormArray;
}
get weights(){
return this.form1.get('weight') as FormArray;
}
get quantities(){
return this.form1.get('quantity') as FormArray;
}
}
这个有效。如果您愿意，请从此处删除不受欢迎的代码。现在就完全展示它。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？