在 Angular 中，我们通常会使用表单来接收和处理用户的输入。然而，在某些情况下，我们需要将一些数据保存到模型中，但又不想让用户看到或修改这些数据。这时候，我们可以使用隐藏的 input 元素来实现。
对于这种需求，我们可以使用 ngModel 指令将 input 元素绑定到组件中的一个属性上。但是，由于 input 元素是隐藏的，用户无法直接操作它们，因此我们需要通过代码来设置它们的值。
下面是一个简单的示例：
<form> <input type="hidden" [(ngModel)]="data.password"> </form>
在上面的示例中，我们创建了一个隐藏的 input 元素，并将它绑定到组件中的 data.password 属性上。当用户提交表单时，Angular 将自动将 input 元素的值存储到 data.password 属性中。
在组件中，我们可以使用以下代码来设置隐藏 input 元素的值：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -----
--
------ ----- ----------- -
---- - -
--------- --
--
---------- -
------------------ - ---------------------
-
-在上面的代码中，我们初始化了 data.password 属性，并将其设置为 "my-secret-password"。这样，当用户提交表单时，Angular 就会将这个值存储到隐藏 input 元素中。
需要注意的是，如果我们想将多个隐藏的 input 元素绑定到模型中，可以在 ngModel 中使用点号语法来指定属性路径。例如：
<form> <input type="hidden" [(ngModel)]="data.user.username"> <input type="hidden" [(ngModel)]="data.user.password"> </form>
在上面的示例中，我们创建了两个隐藏的 input 元素，并将它们分别绑定到 data.user.username 和 data.user.password 属性上。
总结一下，通过将隐藏的 input 元素与 ngModel 指令结合使用，我们可以轻松地将数据绑定到模型中，同时不让用户看到或修改这些数据。这种技术在某些场景下非常有用，例如处理敏感数据、防止重复提交等。
希望这篇文章能给你带来一些启示和帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29042