在Angular Reactive表单中 - 我有这样的数组3项:
productList = [{
productId : "104",
productName : computer
},
{
productId : "105",
productName : sprots
},
{
productId : "106",
productName : location
}]
声明的表单组如下:
this.productFormGroup = this.formBuilder.group({
productFormArray: new FormArray([], CustomValidators.minNumberInputFieldRequired(1)),
});
创建这样的输入字段:
productList.forEach((element) => {
productFormArray.push(new FormControl('', [Validators.pattern(ValidationPatterns.required)]));
});
像这样绑定:
<div *ngFor="let item of formControls; let i = index">
<input type="text" [formControlName]="i" class="form-control">
</div>
题 :
如何使用提交按钮上的ID获取3个文本框更新值?
提交按钮事件: -
if (this.productFormGroup.invalid) {
return;
}
this.productFormGroup.value.productFormArray ? - it is return only update value, not Id.
应该有一种方法来创建带有id的文本框,同时按表格Array中的项目
您必须在FormGroup中创建productId和productName字段(FormControl)。在用户界面侧,仅将productName字段绑定为文本框,因为productId用于内部引用。请参阅以下代码示例:app.component.ts
import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormGroup,FormArray } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';
productList = [{
productId : "104",
productName : "computer"
},
{
productId : "105",
productName : "sprots"
},
{
productId : "106",
productName : "location"
}];
constructor(public formBuilder:FormBuilder){
}
productFormGroup :FormArray
ngOnInit() {
this.productFormGroup = this.formBuilder.array([])
this.productList.forEach(product=>{
this.productFormGroup.push(this.formBuilder.group({
productId:[product.productId],
productName:[product.productName]
}))
})
}
onSubmit(){
console.log(this.productFormGroup.value)
}
}
在用户界面一侧,绑定textbox字段上的productName。看下面的代码示例:
<div [formGroup]="product" *ngFor="let product of productFormGroup.controls">
<input formControlName="productName" type="text" />
</div>
{{productFormGroup.value | json}}
我希望这能解决你的问题。请参阅stackblitz上的工作代码示例