Angular 在提交时更改为打字稿输入字段值为空答案

【问题标题】：Angular changed with typescript input field value empty on submitAngular 在提交时更改为打字稿输入字段值为空
【发布时间】：2022-07-09 21:33:29
【问题描述】：

我想用 ts 方法通过给定名称或 id 值更新输入字段，其 id 或名称用字符串给出。

我尝试使用更新 ngModel ngValue 的不同选项，但仅此而已。

所以我有一个 ipnut 字段

<div class="col-auto">
<input type="text" id="yproduct" name="yproduct" class="form-control"  ngModel required>
</div>

我改变它的价值形式服务：

this.stockInfoService.caller.subscribe(
  data => {
    this.caller = data
    document.getElementById(this.caller).value = this.codeScan;
  }
);

一切都在 html 端工作，字段值显示在输入中，但是当我提交表单时，我的 yproduct 值为空！

{yproduct: ''}

【问题讨论】：

你不应该使用document 对象，Angular 应该是处理 DOM 的对象。另外，您是否尝试过使用Template driven forms 或Reactive forms？
angular.io/guide/built-in-directives#ngModel

【解决方案1】：

注意：您永远不必在 Angular 中调用 document.getElementById。如果您最终手动使用document，则可能存在设计缺陷。

[(ngModel)] 可以在 typescript 变量和 <input> 之间进行双重数据绑定。

正确的用法是：

打字稿

foo = 42

HTML

<input [(ngModel)]="foo">

然后，在后端调用时，您只需修改 foo 值，它就会反映在 input 中

话虽如此，您的主要问题来自您想要修改由后端动态选择的字段这一事实。为此，您可以使用大开关盒创建多个变量。这很简单，可以，但是代码会很乱。

我宁愿将所有<input> 绑定到data 对象的不同属性：

TypeScript

  data = {
    foo: 42,
    bar: 51,
  }

HTML

<div>Foo : <input id="foo" [(ngModel)]="data.foo" /></div>
<div>Bar: <input id="bar" [(ngModel)]="data.bar" /></div>

在后端调用时，您只需修改正确的数据属性：

TypeScript

  callBackend() {
    this.fakeService().subscribe((resp) => {
      this.data[resp] = this.codeScan;
    })
  }

见 StackBlitz here

【讨论】：