代码之家 › 专栏 › 技术社区 › rmi8092

使用ngmodel时,角度4输入形式设置为null

angular4-forms angular

rmi8092 · 技术社区 · 7 年前

我正在创建一个联系人管理器应用程序,有两个窗体,一个用于添加,另一个用于编辑联系人,还有一个面板显示每个联系人数据。关键是我将@Input/@Output所有数据从父组件(contacts.component.ts)传递给子组件(编辑contacts.component.ts)。

在冰点我提供了我的Plunk,你会看到两个输出,第一个在编辑动作点击(在联系人面板)上,第二个在“编辑它!”单击编辑表单上的按钮。如您所见,联系人数据对象正在正确地从父对象传递到子对象。

{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

嗯,当我尝试在编辑联系人上插入ngModel属性时。组成部分html模板(在这个冰点评论)使表单自动填充您在其面板上选择的所有联系人数据,它工作正常,但当我尝试编辑任何输入并单击“编辑它!”按钮,您可以在控制台上看到一个输出,其中有一个属性设置为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>

请,我将感谢你的所有评论。

https://plnkr.co/edit/XQ1nswWI1gg22WtBad3O?p=preview

1 回复 | 直到 7 年前

P. Moloney 7 年前

如果使用双向绑定语法将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>
...

对于数组值,“文字体验”和“教育”,您必须使用和 *ngFor 循环遍历数组,以便轻松访问属性。

另请注意,当您用 this.emptyInputs() 和 this.backAddContact() 您也正在重置模型。。。因此,可以在将编辑的模型发送给父对象后执行此操作。

推荐文章

user8631713 · 角度2中的图表+

6 年前

yankee · 我可以在角度指令中自动检测值而不是使用模板引用变量吗?

6 年前

Tom · _这个。类型get不是angular4中的函数

7 年前

rmi8092 · 使用ngmodel时,角度4输入形式设置为null

7 年前

Munna Babu · 类型“AbstractControl”Angular 4[重复]上不存在属性“controls”

7 年前

Dark99 · 角度4动态组件加载并向父组件发送数据

7 年前

David Jeyathilak · 从JSON数据的嵌套表单数组填充表单控件中的值

7 年前

Tirthraj Barot · 在Angular 4 http请求中,表单数据似乎是请求负载中的其他内容

7 年前

Arryn · 如果发现任何无效Url,Angular 4+Universal重定向到404页面

7 年前

Sangwin Gawande · 角度4形式验证器-minLength和maxLength不适用于字段类型编号

7 年前