表单未预先填充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)分配给像idname 这样的字符串。这也是因为您在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的主要内容,如果未能解决你的问题,请参考以下文章

生成超链接以预先填充Google表单

使用Springboot进行表单管理 - 当用户选择预先输入时自动填充表单

使用 ajax 和 jquery 从数据库中动态添加预先填充的表单

使用 vbscript 填充预先存在的 Excel 表单

Laravel 刀片:如何删除预先填充的表单字段数据(在 db 中另存为空)

从 Angular 2 上的查询参数中预填充输入文本框