1

我的表单上发生了一件奇怪的事情，或者我做的不对，让我通过展示我的代码来向你解释。

我在我的组件中定义了一个表单对象

form = {};

每行都有一个带有数据的按钮，当您单击它时，它会打开一个模态寡妇，并将项目作为参数传递。

<a class="btn btn-warning" (click)="open(item)"><i class="glyphicon glyphicon-pencil"></i></a>

这是触发并打开模式窗口的方法，但也将项目对象分配给上面的表单对象：

open = (item: any) => {
    this.inventoryEditModal.open(); //Opens a modal window

    this.form = item; // the assignment 
}

通过像这样打印出来，可以在视图上使用 item 对象：

{{ form | json }} // i can see all item properties

模态窗口包含一个表单，用户将在其中编辑项目，所以基本上输入表单字段应该填充项目属性值，但由于某种原因，第三级未定义，我不明白为什么，让我给你看一个截图第二级

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem" name="wireless">

在此处输入图像描述

第三级未定义：

<input type="text" class="form-control" [(ngModel)]="form.alarmSystem.wireless" name="wireless">

在此处输入图像描述

此问题仅发生在第三级“object.object.property”。我只显示一个输入字段，但表单包含超过 8 个字段，它们都有相同的问题。

不确定我在这里缺少什么，但从逻辑上讲它应该可以工作。你有没有看到这个问题在这里和那里发生或经历过你自己？

先感谢您。

4

2 回答 2

2

我不确定它是否对您的情况有所帮助，但我的情况非常相似。

帮助我的是使用“安全导航操作员”。

我假设您需要做的只是添加? 表格后：

<input type="text" class="form-control" [(ngModel)]="form?.alarmSystem.wireless" name="wireless">

可以在此处找到文档：https ://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

于 2016-10-05T04:45:45.853 回答
1

Angular 5 可以有 3 种可能的解决方案

  1. 不要分配ngForm给表单的模板变量（在表单 HTML 元素中）

不要这样做 -

<form #newItem="ngForm" (ngSubmit)="saveItem(newItem.value);">

相反，这样做 -

    <form (ngSubmit)="saveItem();">
        <input type="text" class="form-control" name="wireless [(ngModel)]="form.alarmSystem.wireless">
        <submit type="submit">Save</submit>
    </form>

这样，您将能够将 3 级嵌套属性分配给 [(ngModel)]，而无需任何 elvis 或安全导航运算符 (?)。

  1. 如果您要分配ngForm给表单模板变量，那么即使它已经具有一些值，[(ngModel)]也会给出3 级嵌套属性。undefined因此，请改用该name属性 -

     <form #newItem="ngForm" (ngSubmit)="saveItem(newItem.value);">
     <input type="text" name="alarmSystem.wireless" ngModel class="form-control">
 </form>

alarmSystem.wireless现在，在这种情况下，分配给属性的嵌套属性将被 2-way using指令name绑定。ngModel您可以在事件发射器功能中轻松访问它。

  1. 使用猫王运算符（？）的最后一个解决方案是 -

在这里，同样我们不会ngForm在表单模板变量中赋值，虽然不会有任何错误但它不会正确存储输入中输入的值。因此，像这样使用 [ngModel] 和 (ngModelChange) 拆分 2 路数据绑定

<form (ngSubmit)="saveItem();">
    <input type="text" name="wireless" 
                            [ngModel]="form?.alarmSystem?.wireless"
                            (ngModelChange)="form.alarmSystem.wireless=$event" class="form-control">
</form>

你也可以参考这个答案——正确使用 Angular2 中的 Elvis 运算符来查看 Dart 组件的视图

但是，我不推荐这种解决方案，因为它增加了很多代码。

于 2021-04-06T15:24:02.093 回答