Angular 表单 - 如果不更改，post 将不会获取值

Question

简短版本：提交 post 按钮仅获取已更改的数据，即使输入字段具有值（已加载）也是如此。为什么没有获取加载的值？

长版：

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

问题是：

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

示例：您进入景点并仅编辑名称并点击 "Save"。当您打开相同的视线时，只会显示名称，不会发送其他值。

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

Answer 1

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

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

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

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

DEMO 与后者：StackBlitz

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

此外，完全值得一试 Reactive Forms!

Angular 表单 - 如果不更改，post 将不会获取值

Angular form - post won't get values if not changed

angular

forms

post

angular-services

angular-forms

问题是：