时间戳

首页 > 解决方案 > 使用 document.forms.input.value 设置其值后具有未定义值的输入字段

angular - 使用 document.forms.input.value 设置其值后具有未定义值的输入字段

问题描述

我正在开发一个 Angular 应用程序，我需要编辑数组中的值。所以，我的数组显示在表格中，当我单击表格行编辑图标时，它会在某些输入中显示字段的值，这些值取决于我的表格。

像这样：
[ https://i.stack.imgur.com/OP85L.png]。

但是当我使用编辑并保存而不进行更改时，它会将我的输入值转换为未定义的值，而不是保持相同的旧值。那是我的代码：

document.forms[0].serverAlias.value = alias;
document.forms[0].serverHost.value = host;
document.forms[0].netDataAddress.value = netData;

我的输入：

<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Alias do Servidor</label>
        <input [(ngModel)]="serverAlias" name="serverAlias" type="text" class="form-control"> 
    </div>
</div>
<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Host do Servidor</label>
        <input [(ngModel)]="serverHost" name="serverHost" type="text" class="form-control"> 
    </div>
</div>
<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Endereço do NetData</label>
        <input [(ngModel)]="netDataAddress" name="netDataAddress" type="text" class="form-control"> 
    </div>
</div>

现在，我看到如果我用鼠标单击该字段并单击它，当我保存编辑时它会发送正确的值。

标签： angulartypescriptecmascript-6angular5angular6

解决方案

也许您应该尝试使用对象和类型来进行数据绑定，而不是使用documents.forms[0]...和局部变量：

public serverToEdit: {
    alias: string,
    host: string,
    netData: string
};
// now in your code instead of document.forms[0]... :
serverToEdit.alias = alias;
serverToEdit.host = host;
serverToEdit.netData = netData;

您的版本表应如下所示：

<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Alias do Servidor</label>
        <input [(ngModel)]="serverToEdit.alias" name="serverAlias" type="text" class="form-control"> 
    </div>
</div>
<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Host do Servidor</label>
        <input [(ngModel)]="serverToEdit.host" name="serverHost" type="text" class="form-control"> 
    </div>
</div>
<div class="col-md-3">
    <div class="wrapper-upload item-block ">
        <label>Endereço do NetData</label>
        <input [(ngModel)]="serverToEdit.netData" name="netDataAddress" type="text" class="form-control"> 
    </div>
</div>

保存时，您会从 object 获取新值serverToEdit。

推荐阅读