时间戳

首页 > 解决方案 > 角度形式 - 如果不更改，帖子将不会获得值

angular - 角度形式 - 如果不更改，帖子将不会获得值

问题描述

短版：提交帖子按钮仅获取已更改的数据，即使输入字段具有值（已加载）。为什么没有得到加载的值？

长版：

所以我在 Angular 中有这个表单，它有一堆具有值的输入字段{{sight?.name}}，即。它在从 getService 加载组件时获取值。

这是 html 的一部分（整个页面都在 StackBlitz 上）：

...
    <div class="form-group sight-edit-name">
        <label class="purple-text" for="sightName">Name:</label>
        <input type="text" class="form-control" name="name" id="sightName" ngModel value="{{sight?.name}}">
    </div>
...

这工作正常，它在组件加载时显示具有正确数据的表单：

在此处输入图像描述

现在保存按钮是一个提交按钮：

<button type="submit" class="btn btn-save" (click)="onSubmitEdit(sightFormEdit.value, sight.id)">Save</button>

调用以下函数：

  onSubmitEdit(value: any, sightid: any) {
    //value is form, sightid is the id of current sight
    console.log("You have edited form and changed to this:", value);

    //call sight servise that edits the data
    this.sightService.editSight(value, sightid).subscribe((res: any) => {
      console.log(res);
    });

  }

这将调用编辑数据的服务。当表单中的所有内容都发生更改时，这可以正常工作。

  editSight(sight, sightId): Observable<any> {
    let sightEditId = this.sightEdit + sightId;

    return this.http.post(sightEditId, sight);
  }

问题是：

如果您不更改表单输入字段并提交数据，则只会更改/提交已更改的数据。它没有获取页面上加载的值。

示例：您输入一个视线并仅编辑名称并点击“保存”。当您打开同一个视线时，只会出现名称，其他值不会发送。

整个页面可以在这里找到：https ://stackblitz.com/edit/angular-dsqbf3

标签： angularformspostangular-servicesangular-forms

解决方案

Angular 表单，反应式或模板驱动的表单都不关心[value]. 他们只关心表单控件中设置的内容，目前您没有为表单控件设置任何值。如果要在模板驱动的表单中将值绑定到表单，则需要使用单向或双向绑定来绑定数据。目前，您正在将表单控件与name属性 和一起注册ngModel，但没有使用该方法设置任何值。如前所述，将您的变量绑定到表单，例如：

<input name="name" [(ngModel)]="sight.name">

如果您sight要异步，您可以在表单中切换到单向绑定，您可以在其中使用安全导航运算符：

<input name="name" [ngModel]="sight?.name">

带后者的演示：StackBlitz

此外，我们通常在表单标签本身上设置提交功能，我们可以省略按钮的点击功能，因为默认情况下按钮是submit表单标签内的类型。

此外，查看Reactive Forms也是完全值得的！

推荐阅读