角度形式-如果未更改，则帖子将无法获取值

Question

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

---

长版：

所以我在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

Answer 1

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

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

如果您的sight即将异步，则可以切换到表单的单向绑定，您可以在其中使用安全的导航操作符：

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

DEMO和后者： StackBlitz

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

另外值得一提的是 Reactive Forms!