使用[(ngModel)]仅更改引用对象，而不更改源
[(ngModel)]是Angular框架中的一个双向数据绑定语法，用于在模板和组件之间实现数据的双向同步。它可以将模板中的表单元素的值与组件中的属性进行绑定，实现数据的双向传递。
使用[(ngModel)]可以实现以下功能：
- 数据的双向绑定：当用户在表单元素中输入数据时，数据会自动同步到组件中的属性；同时，当组件中的属性值发生变化时，表单元素的值也会自动更新。
- 表单验证：[(ngModel)]结合Angular的表单验证机制，可以对表单元素的值进行验证，并提供相应的错误提示。
- 表单状态的管理：[(ngModel)]可以跟踪表单元素的状态，包括是否被访问过、是否被修改过等，从而可以根据表单的状态进行相应的处理。
在Angular中，[(ngModel)]需要配合FormsModule模块一起使用。首先，在模块中引入FormsModule模块，然后在组件的模板中使用[(ngModel)]语法进行数据绑定。
以下是[(ngModel)]的一些应用场景：
- 表单输入：可以将用户输入的数据与组件中的属性进行绑定，实现实时的数据同步。
- 表单验证：可以对用户输入的数据进行验证，并提供错误提示。
- 表单状态管理：可以根据表单的状态进行相应的处理，例如禁用提交按钮等。
腾讯云提供了云计算相关的产品和服务，其中与前端开发和后端开发相关的产品有云服务器CVM、云函数SCF、云数据库MySQL、云存储COS等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
请注意，根据要求，本回答不包含对其他云计算品牌商的提及。
相关·内容
在对两个角形模块(FormsModule和ReactiveFormsModule)进行逆向工程之后，我将ngModel的三种用途作为指令中的输入。
在FormsModule中，在 ngModel 指令中只使用NgModel一次。'ngModel:not(formControlName):not(formControl)').是指令选择器的一部分(选择器: ngModel )因此，对于NgModel指令，ngModel有两个角色。这是一个输入，同时也是一个选择器。
在ReactiveFormsModule中，ngModel被使用了两次。第一个用法是在FormControlDire
浏览 8提问于2017-10-23得票数 1
回答已采纳
我理解组件类中的FormGroup实例可以在反应性表单中链接到模板中的表单，以验证其输入字段。但是，我不知道如何在模板驱动的表单中使用FormGroup。ngModel和FormGroup有什么区别？
浏览 0提问于2019-02-08得票数 1
回答已采纳
你好，我最近冒险进入角和离子的发展。
我理解插值和属性绑定是将数据从一个类传递到另一个模板，插值只支持字符串，而属性绑定支持所有类型。
事件绑定用于将数据从模板传递到类。
利用foll实现了双向绑定。4种方式：
使用ngModel香蕉语法：
<input (ngModel)="username"> Hello {{username}}！
没有香蕉语法的NgModel：
<input ngModel="username“(ngModelChange)="username = $event"> Hel
浏览 0提问于2018-12-09得票数 6
回答已采纳
我创建了一个示例项目，在其中我使用了组件，一个带有注册名，另一个具有登录名，同时验证注册页面，给出下面提到的错误。
当表单验证时，错误发生。
>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
</div>
<div>
<input type="email" name="emailId" pla
浏览 1提问于2018-03-23得票数 2
回答已采纳
我们正在进行一个角度项目，其中有一个组件，它生成一个通过getter加载的列表，该列表生成使用ngModel指令的输入。每次我们更改输入中的值时，都会因为某种原因重新评估项目列表，并重新划分我们不想要的组件。
下面是一个展示这种行为的例子。
import {NgModule,ChangeDetectionStrategy,Component,OnChanges,SimpleChanges,Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
impo
浏览 2提问于2017-10-12得票数 1
1回答
我在设置模板驱动的表单输入的值时遇到问题。该值来自editMovie对象。我希望表单在显示时使用editMovie值填充，然后用户可以编辑editMovie对象的一部分或保持不变。为没有附加[(ngModel)]的输入正确设置了表单值，但是附加了该值的输入不会设置默认值。下面是一个示例：
<div class="form-group">
<label for="imdb">Edit IMDb ID</label>
<input #editImdb type="text" class=
浏览 0提问于2018-03-07得票数 7
回答已采纳
我必须将从myForm.valid获得的boolean值传递给Angular 2组件。它是一个模板驱动的表单。通过双向绑定的方式在组件中获取它是我想要实现的目标。下面的代码不起作用。如何获得myForm.valid的值到我的Angular 2组件？
<form #myForm=“ngForm">
.
.
<input type="hidden" id="isValid" name="isValid" [(ngModel)]="isValid" value="myForm.valid"/&g
浏览 0提问于2017-09-28得票数 1
我刚开始学习角，我想尝试实现双向绑定。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppCo
浏览 4提问于2021-07-24得票数 0
回答已采纳
我正在尝试根据来自另一个组件的状态自动填充文本框。它工作得很好。但是当我将ngModel添加到文本框中，以便在提交表单时接受该值时。该值将被清除，并且不会显示给用户。
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" value="{{state.type}}" readonly />
</div>
<
浏览 1提问于2020-07-01得票数 0
我实际上正在处理一个表单，并且我正在为每个字段进行验证。但是有一个问题。我的component.html文件块如下所示，
<div class="field"style="padding:1%">
<label>Pacs name</label>
<input
name ="name"
type="text"
[(ngModel)]="pacs.name"
formControlName=&
浏览 0提问于2018-03-06得票数 1
4回答
我想知道什么时候必须在输入中使用(ngModel)，以及什么时候才能使用#reference，例如
<div class="form-group">
<div class="input-group mb-2">
<input type="text" class="form-control" [(ngModel)]="newUser">
<button class="btn btn-outline-success" (click)="
浏览 0提问于2018-07-23得票数 5
回答已采纳
2回答
在我的Angular 6应用程序中，我有一个导入自定义模块的app.module.ts文件：
import { AppGuiModule } from './app-gui.module';
...
imports: [
AppGuiModule,
反过来，app-gui.module文件导入表单模块：
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
FormsModule,
ReactiveFormsModule,
我认为这足以使用[
浏览 0提问于2018-10-10得票数 2
回答已采纳
在开发角度应用程序时，为了实现双向绑定，使用(ngModel)方法(如下所示)比以下3种方法(也在下面列出)有什么好处。还有，其中之一。实现双向数据绑定的最佳选择(无论是构建表单还是一般(非表单)用例场景)？
(ngModel)方法：
<input [(ngModel)]="varName">
<--OR-->
<input [ngModel]="varName" (ngModelChange)="SomeFunction($event.target.value)">
1.输入/事件绑定如下：
浏览 1提问于2018-11-02得票数 2
回答已采纳
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<input [(ngModel)]="name" type="text" (input)="inputChange()">
<h3>{{name}}</h3> `
})
export class AppComponent {
name = 'Apple';
i
浏览 0提问于2018-11-28得票数 1
回答已采纳
2回答
关于Angular2/4/5/6，我所了解到的是，由于(ngModel)，双向数据绑定是可能的--就像通过$scope在Angular1中发生的那样。
现在，我偶然发现了一个网站，其中明确指出，双向数据绑定是不可能在Angular4。我很困惑。有人真的能澄清吗？--在角度为2/4/5/6的情况下，双向数据绑定是否可行？
链接：
浏览 3提问于2018-09-15得票数 1
回答已采纳
我正在阅读教程和文档，但我不理解Template reference variables的概念。我们有用于双向绑定的NgModel，但是为什么我们要在Angular中使用Template reference variables？
浏览 1提问于2020-04-20得票数 0
1回答
我是角2\4中的新手(我来自Java)，对于使用PrimeNG“组件”的角项目，我有以下疑问。
我遵循了这个快速的"Hello“视频教程(在我看来是一个官方教程)来创建我的第一个示例，其中包括PrimeNG到我的角4 webapp应用程序：
我对这个例子的逻辑以及最终如何重构这个例子有一些疑问。
好的，正如你所看到的，它是这样写的：
<p-calendar [(ngModel)]="value"></p-calendar>
{{value | date:'dd.mm.yyyy'}}
与PrimeNG日历组件相关(我认为它是一个组件
浏览 3提问于2017-08-11得票数 0
回答已采纳
我在这里有点困惑。使用ngModel，我可以执行以下操作：
import {NgModel} from "angular2/common";
@Component({
selector: "test",
template: `<input tpye="text" [(ngModel)]="strInObj.str"> {{strInObj|json}}`,
directives: [NgModel]
})
class Test{
strInObj: {str: string} = {str: "
浏览 3提问于2016-01-28得票数 2
回答已采纳
当用户属性与ngOnChanges一起更改时，ngModel不会触发，这对我来说很奇怪，因为我使用的是vue js和计算方法，我想这里也是一样的。
组件
import { Component, OnChanges } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppCom
浏览 4提问于2020-07-28得票数 0
回答已采纳
1回答
我正在尝试通过实验来学习角2，我发现ngOnChanges不会在下面的代码中触发：
app.component.ts:
import { Component, Input } from "@angular/core"
import { FormsModule } from '@angular/forms';
import { OnChanges, SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'my-a
浏览 0提问于2018-04-08得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
