Angular 使用 ngmodel 时 4 个输入表单设置为空

Question

我从 angular、angular 4 开始，我正在处理一个错误：

我正在创建一个联系人管理器应用程序，它有两种形式，一种用于添加联系人，另一种用于编辑联系人，还有一个显示每个联系人数据的面板。关键是我将所有数据从父组件 (contacts.component.ts) 传递到子组件 (edit-contact.component.ts).

在冻结点我提供我的 plunker 你会看到两个输出，第一个在编辑操作点击（在联系面板上），第二个在 "edit it!" 点击编辑表单上的按钮.如您所见，联系人数据对象正确地从父级传递给子级。

{id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} contacts.component.ts:33
{id: 1, name: "Sofia Mejia Gomez", id_number: "87654667X", age: "32", phone: "984613164", …} edit-contact.component.ts:36

好吧，当我尝试在 edit-contact.component.html 模板上插入 ngModel 属性（在此冻结点进行评论）以使表单自动填充您在其面板上选择的所有联系人数据时，它工作正常但是当我尝试编辑任何输入并单击 "edit it!" 按钮，您可以在控制台上看到一个输出，其中包含一个属性设置为 null 的对象。

<div class="input-group main-data">
    <label for="name"></label>
    <input
      type="text" 
      class="form-control"
      name="name" 
      placeholder="Type your name..."><!--bindon-ngModel="contactToEdit.name"-->
    ...
  </div>

拜托，我会感谢你的所有意见。

这是我的 Plunker：https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview

Answer 1

如果您将 ngModel 添加到输入中，使用双向绑定语法 [(ngModel)]，如 angular docs 中所述，您的 Plunker 似乎按预期工作。

即

edit-contact.component.html
...
<div class="input-group main-data">
    <label for="name"></label>
    <input
      type="text" 
      class="form-control"
      name="name"
      placeholder="Type your name..."  
      [(ngModel)]="contactToEdit.name"><!-- << See Here -->
    <label for="id_number"></label>
    <input 
      type="text" 
      class="form-control" 
      name="id_number" 
      placeholder="Id number..." 
      [(ngModel)]="contactToEdit.id_number"><!-- << And Here -->
</div>
...

对于数组值 "Word Experience" 和 "Education"，您将不得不使用和 *ngFor 循环遍历数组以便轻松访问属性。

另请注意，当您使用 this.emptyInputs() 和 this.backAddContact() 重置表单时，您也会重置模型...因此，也许在将编辑后的模型发送给父级后执行此操作。

Angular 使用 ngmodel 时 4 个输入表单设置为空

Angular 4 inputs form set to null when using ngmodel

angular

angular4-forms