表单未预先填充Angular 8
Posted
技术标签:
【中文标题】表单未预先填充Angular 8【英文标题】:Form not pre-populated Angular 8 【发布时间】:2020-07-05 15:41:07 【问题描述】:我有一个返回对象数组的 API 服务。每个对象都有两个字段名称和用法。我正在动态创建一个表单,其中表单字段的数量等于数组中的对象数量。表单字段的名称是name
,它应该预先填充usage
值。我能够创建表单并命名表单字段,但 usage
值未在每个表单字段中显示正确的值。
我的 TS 文件代码:
ngOnInit()
this.apiCall.getArray()
.subscribe(
(res: any) =>
this.receivedData = res;
for (let i = 0; i < this.receivedData.length; i ++)
this.currentName = this.receivedData[i].name;
this.currentUsage = this.receivedData[i].usage;
this.name.push(this.currentName);
this.usage.push(this.currentUsage);
name 和usage 是存储值的数组。在我的 html 中:
<form>
<div class="form-row">
<div class="form-group *ngFor="let plans of name">
<label>plans</label>
<input type="number" min="0" class="form-control" id="usage" name="usage" value="usage" [(ngModel)]="usage">
</div>
</div>
</form>
现在我的表单字段显示正确的字段名称,但字段为空。它们应预先填充各自的使用值,并且用户应该能够根据需要更改值。
【问题讨论】:
【参考方案1】:我认为您的代码存在一些问题。
首先,如果您想为 Angular *ngFor
循环中的属性赋值,您需要执行类似 item.foo
的操作。接下来,需要方括号[]
才能将值实际传递给属性并循环遍历数据数组,因为数据是动态的。
最后一个问题是您不能将数字(我假设item.usage
将是number
)分配给像id
和name
这样的字符串。这也是因为您在input
字段中添加了type="number"
。
这将导致以下 HTML 设置。我正在使用let item of items
循环遍历数据并选择我需要它们的键。
<form>
<div class="form-row">
<div class="form-group" *ngFor="let item of items">
<label>item.name</label>
<input type="number" min="0" [id]="item.name" [name]="item.name" class="form-control" [(ngModel)]="item.usage">
</div>
</div>
</form>
使用一些模拟数据,结果证明它可以工作。
received = [
name: 'Field 1',
usage: 123456,
,
name: 'Field 2',
usage: 4655454,
,
name: 'Field 3',
usage: 54445,
];
请参阅 this StackBlitz example 获取一个工作示例,解决我之前提到的所有问题。
【讨论】:
Roy,如果你使用 [(ngModel)] 你不需要使用 [value] @Eliseo 啊,是的。忘记了,改了。 @Roy 效果很好。现在表单已创建并预先填充了使用值。如果用户更改了一些使用值并点击提交。由于 ngModel 值是动态的,如何创建一个 json 对象以发送到后端,我该如何创建它?我试过onSubmit this.changedValues = this.item.usage;
但是假设有 4 个表单字段我如何创建单独的参数以添加到 json 中,还假设我在项目中添加另一个参数 id
我如何发送它以及更改的使用值。感谢您的任何帮助
@Vishavgeet 我看到你问了另一个问题:***.com/questions/62771703/…
嗨@Roy 是的,我实际上是 *** 的新手,下半部分在 cmets 中提出的这个问题没有获得任何意见。所以我就简单地问了。我也是 Angular 的新手,不确定如何发送更新的 json。但是这两个答案结合起来正是我正在研究的。再次感谢。以上是关于表单未预先填充Angular 8的主要内容,如果未能解决你的问题,请参考以下文章
使用Springboot进行表单管理 - 当用户选择预先输入时自动填充表单
使用 ajax 和 jquery 从数据库中动态添加预先填充的表单