双向数据绑定中ngModel的事件列表
ngModel是Angular框架中的一个指令，用于实现双向数据绑定。它可以将数据模型与视图中的表单元素进行绑定，使得数据的变化能够自动反映到视图中，同时用户在视图中的输入也能够自动更新数据模型。
在双向数据绑定中，ngModel提供了一些事件列表，用于监听数据的变化和用户的交互。以下是ngModel的事件列表：
- ngModelChange：当绑定的数据模型发生变化时触发该事件。可以通过在模板中使用
(ngModelChange)来监听该事件，并在组件中定义相应的处理函数。 - ngModelValid：当绑定的表单元素的值通过验证时触发该事件。可以通过在模板中使用
(ngModelValid)来监听该事件，并在组件中定义相应的处理函数。 - ngModelInvalid：当绑定的表单元素的值未通过验证时触发该事件。可以通过在模板中使用
(ngModelInvalid)来监听该事件，并在组件中定义相应的处理函数。 - ngModelTouched：当用户触摸（点击）了绑定的表单元素后触发该事件。可以通过在模板中使用
(ngModelTouched)来监听该事件，并在组件中定义相应的处理函数。 - ngModelUntouched：当用户未触摸（点击）绑定的表单元素时触发该事件。可以通过在模板中使用
(ngModelUntouched)来监听该事件，并在组件中定义相应的处理函数。 - ngModelPristine：当绑定的表单元素的值未被修改时触发该事件。可以通过在模板中使用
(ngModelPristine)来监听该事件，并在组件中定义相应的处理函数。 - ngModelDirty：当绑定的表单元素的值被修改后触发该事件。可以通过在模板中使用
(ngModelDirty)来监听该事件，并在组件中定义相应的处理函数。 - ngModelPending：当绑定的表单元素的值处于异步验证过程中时触发该事件。可以通过在模板中使用
(ngModelPending)来监听该事件，并在组件中定义相应的处理函数。
这些事件可以帮助开发者在双向数据绑定的过程中进行数据的处理、验证和状态的监控。在实际应用中，可以根据具体的需求选择合适的事件进行监听，并在相应的处理函数中编写业务逻辑。
腾讯云提供了一系列的云计算产品，其中与Angular框架相关的产品包括云服务器、云数据库MySQL版、云存储等。您可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
1回答
我有一个输入列表，这些输入被绑定到组件中的一个对象。我希望能够更改输入框中的值，并让它们在关联对象中更改--目前它们不是。
这是我的档案：
home.component.ts
export class HomeComponent implements OnInit, OnDestroy {
consumerProfile = {
'firstName': 'Joe',
'lastName': 'Soap',
'gender': 'Male',
'prof
浏览 0提问于2018-05-02得票数 1
回答已采纳
我正在使用primeng listbox组件，并且希望避免banana in a box双向数据绑定，因为不推荐这样做。html side提供了这样的功能：
<p-listbox [options]="cities1" [(ngModel)]="selectedCity"></p-listbox>
目前，TS只包含selectedCity的声明：
selectedCity: City;
而City是一个接口：
export Interface City {
id: string;
name: string;
contin
浏览 1提问于2018-04-24得票数 0
1回答
ngModel不起作用。我把它和文本框一起用。
app.component.html
<input type="text" [value]="name" [ngModel]="name">
Name is: {{name}}
app.component.ts
name = '';
constructor() { }
ngOnInit(): void {
this.name = "Hello";
}
当我更改textbox值时，该值在组件中不会更改。但是双向数据绑定使用的是[(ngModel)]=&
浏览 7提问于2022-08-28得票数 0
回答已采纳
考虑到下面的代码，我试图理解三种不同的数据绑定方式之间的区别。因为我是angular4新手，所以我需要澄清一下什么时候该使用什么。例如，为了分配ngModel，使用了(ngModel)。若要分配禁用属性，请使用“禁用”。若要分配ngSubmit处理程序，则使用(ngSubmit)。很难区分其中的每一个。
<section class="sample-app-content">
<h1>Template-driven Form Example:</h1>
<form #f="ngForm" (ngSub
浏览 5提问于2018-01-10得票数 0
回答已采纳
在角2.x中，ng模型和NgModel在角2上有什么区别吗？参考下列角度文件
它使用术语[(ng-model)]="property"解释双向数据绑定。下面是使用NgModel (而不是ng模型)的示例。
<input [(ngModel)]="hero.name">
我很困惑这是不是一个错误(我想不是！)
浏览 3提问于2017-06-01得票数 7
回答已采纳
我希望获得角7中选择选项的选定值。使用ngModel进行双向数据绑定，我还在app.module.ts中导入了FormsModule。
我的HTML文件：
<select (change)="selectChangeHandler($event)"
[(ngModel)]="optSelected">
<option *ngFor="let opt of options" [value]="opt.id">
{{opt.title}}
</option>
</select>
浏览 0提问于2019-05-30得票数 0
回答已采纳
我们正在进行一个角度项目，其中有一个组件，它生成一个通过getter加载的列表，该列表生成使用ngModel指令的输入。每次我们更改输入中的值时，都会因为某种原因重新评估项目列表，并重新划分我们不想要的组件。
下面是一个展示这种行为的例子。
import {NgModule,ChangeDetectionStrategy,Component,OnChanges,SimpleChanges,Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
impo
浏览 2提问于2017-10-12得票数 1
2回答
关于Angular2/4/5/6，我所了解到的是，由于(ngModel)，双向数据绑定是可能的--就像通过$scope在Angular1中发生的那样。
现在，我偶然发现了一个网站，其中明确指出，双向数据绑定是不可能在Angular4。我很困惑。有人真的能澄清吗？--在角度为2/4/5/6的情况下，双向数据绑定是否可行？
链接：
浏览 3提问于2018-09-15得票数 1
回答已采纳
我在我的Angular应用程序中有一个模板驱动的表单，我尝试了很多，但我不能找出我的代码有什么问题。
我想从选择列表中返回选定的值，并将其保存到Firebase数据库。我有5个输入字段，所有字段都返回数据，我能够保存到Firebase，除了选择列表值，其数据返回为未定义。
这是我的模板驱动表单代码：
<div class="formalign">
<form #f="ngForm" (ngSubmit)="save(f.value)">
<div class="form-group">
浏览 0提问于2018-11-10得票数 1
下面是一个模板示例：
<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">
<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">
在这里，他们两个都在做同
浏览 6提问于2017-02-28得票数 114
回答已采纳
在学习angular2时，遇到了这两种从输入字段读取值的方法，如下所示：
<input type="text"[(ngModel)]="pname"> // I can read the value from --> pname
<input type="text" (keyup)="addvalue($event)"> // I can check for enter press and read text
例如，如果我想写一个ToDo应用程序，并要求用户在输入字段中输入列表，在单击Add按钮后，可
浏览 3提问于2017-06-21得票数 1
我在这里有点困惑。使用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
回答已采纳
我正在阅读的“角2”训练书。我试图了解变化检测是如何工作的。在中，作者说
在角度上，信息流是单向的，即使在使用ngModel实现双向数据绑定时也是如此，这只是单向流之上的语法糖。在这个新版本的框架中，我们的代码负责更新模型。
我想知道的意义，单向流动的信息手段在角2参考。是因为树状构件的结构吗？或者是别的什么东西。有人能帮我吗？
浏览 2提问于2017-02-20得票数 1
回答已采纳
我在html模板中使用了以下语句：
[(ngModel)]="tempProduct.unitprice | number : '1.2-2'"
但是当我运行它时，我在控制台中得到了这个错误：
动作表达式中不能有管道..。
我需要使用这个数字管道，但使用[(ngModel)]，否则我将得不到数据。有什么建议吗?我该怎么解决？？我尝试使用[ngModel]，但当我这样做时，我没有得到数据，它在html模板中是空的。
浏览 3提问于2017-09-04得票数 32
回答已采纳
3回答
我对此非常陌生，并试图从下面的角度2模板代码中理解一些东西。
<label for=”productNameInput”>Product Name</label>
<input type=”text”
id=”productNameInput”
placeholder=”Product Name”
[ formControl]=”myForm. get ( ’productName ’)”
[ (ngModel) ] = ”productName”>
我有两个问题：
哪些属性应该在相应的类中定义？
ngModel周围的大括号是用来做什么的？
浏览 0提问于2018-05-28得票数 0
回答已采纳
3回答
选择改变角度的实现？
、、、、
angularjs有一个名为onchanges的内置指令，它可以侦听select或其他方面的更改，并允许您在更改时执行函数。
我多么希望这是如此的棱角分明。目前，我对ngmodel有了更好的理解，并且看到了我如何能够使用一个主题来获得以下信息。
我选择了一些城市：
<div id="venueFilterParams" ngModelGroup="venueFilterParams">
<!-- need to add default values from url-->
<select [n
浏览 6提问于2017-07-12得票数 0
回答已采纳
5回答
我使用以下方法将值放置在输入字段中。
<input matInput placeholder = "ProductName" [(ngModel)]="orderLine.productname">
但是，有时值可能为空。在打问号的时候？下面，我们收到以下错误，有人如何在输入中放置可能的空空值，或者不可能？
<input matInput placeholder = "ProductName" [(ngModel)]="orderLine?.productname">
‘？’运算符不能在[orderLine
浏览 1提问于2019-11-27得票数 1
回答已采纳
在我的angular组件ts文件中，我有一个模型，它有一个属性值是html格式的文本。使用我的组件的.html文件中的div的内部html属性，文本显示在UI中。通过设置editable属性，可以使div成为可编辑的。 代码片段： <div id="requestBody" contenteditable="true"
*ngIf="selectedReqTab==='reqBody'" [innerHTML]="formatJson(requestBody)"></div> 在这里，f
浏览 44提问于2019-05-27得票数 1
1回答
数字输入值格式
、、
我有两个输入，第一个是以前调用的，第二个是在before中引入值时调用的after值
之前/ 1000
它意味着3个小数或更多，有时我应该如何显示的after输入值，只有2个小数？在不改变它的十进制值和精度的情况下，我尝试使用管道，但在ngModel指令中是不允许的。
<ion-label for="ristourneAmount">Source: </ion-label>
<ion-input
type="number"
step="0.01" [(ngModel)]="before
浏览 1提问于2018-11-05得票数 1
回答已采纳
我已经建立了这样一个可以观察到的：
this.source$ = this.store$
.select(state => state.source);
在模板中：
<form>
<div class="form-group">
<input type="email" id="input-to" placeholder="To" [ngModel]="(source$ | async).customer" name="sender" c
浏览 3提问于2017-03-16得票数 1
2回答
我正在使用Angular和ionic创建一个登录系统，并尝试使用(ngModel)来连接变量，以便在字段发生变化时进行更新。我在关注this tutorial export class ModalLoginComponent implements OnInit {
modal;
state = "";
headerText = "Sign Up";
emailInput;
passwordInput;
nicknameInput;
constructor(public toastController: ToastCon
浏览 37提问于2021-03-26得票数 0
我目前了解到[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我还理解[ngModel]="expression"是单向绑定的(我相信从组件到视图？)还有可能出现(ngModel)="expression"。我对[ngModel]和(ngModel)之间的区别感到困惑。谁能解释一下吗？
编辑：在玩了一遍之后，查看了@Rohan给出的文档片段，我意识到像(ngModel)这样的东西应该使用语句，而不是表达式。尽管如此，是否有合适的时间使用类似(ngModel)之类的东西，或者在任何情况下都能工作呢？
浏览 4提问于2017-09-08得票数 17
回答已采纳
我想这应该是可行的：
@Component ...
...
<div *ngFor="#item of m_checkboxes">
<Input #checkInputs type="checkbox" [(value)]="item.value">
</div>
...
constructor(){
var self = this;
setInterval(()=>{
console.log(self.m_che
浏览 1提问于2016-03-08得票数 0
回答已采纳
我面临的问题是，我不能将球队的俱乐部设置为[selected]的[ngValue]选项。然而，如果我使用的是[value]和[selected]，它将球队的俱乐部设置为选项，但是我不能用[value]传递对象
这里是我的代码：
使用[value]和[selected]，将球队的俱乐部设置为[selected]选项，但我不能将对象传递给[value]
<select
*ngIf="isEditing"
name="club"
#club="ngModel"
[ngModel]="team?.club&#
浏览 1提问于2020-04-18得票数 0
4回答
我使用了第三方下拉列表和日历组件，如果我更改值ngmodel值是错误的更新。它必须采用当前值而不是这个值，而是采用旧值。
样本：
如何将当前值更新为ngmodel.？请给出一个好的答案
复制程序：
1.运行示例链接
更改下拉值或日历值
3.请参阅控制台日志，使用参数获取当前值，但ngmodel显示旧值。
Html文件
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<ejs-datepicker id="d
浏览 0提问于2018-09-21得票数 3
回答已采纳
6回答
我有一个HTML输入字段。
<input
[(ngModel)]="item.value"
name="inputField"
type="text"
/>
我想格式化它的值并使用一个现有的管道：
....
[(ngModel)]="item.value | useMyPipeToFormatThatValue"
....
并获得错误消息：
不能在操作表达式中有管道。
在这种情况下，我如何使用管道？
浏览 7提问于2016-09-22得票数 184
回答已采纳
3回答
我刚刚开始学习Angular2，我想知道为什么开发人员决定在html中使用各种不同的包装器？例如：
[(ngModel)]="some.property"
(click)="someMethod()"
[src]="some.property"
我确信这背后有一个很好的逻辑原因，而且我知道它们被用于不同的目的，但乍一看，这似乎不一致，而且是一个不必要的障碍。
浏览 9提问于2016-12-05得票数 5
回答已采纳
在角度上，如何使自定义组件的模板是一个简单的有(ngModel)应用于它？我希望这个(ngModel)是一个简单的布尔标志。单击div后，将更改此ngModel。添加到已经存在的组件中的最低代码是什么？
浏览 1提问于2018-09-14得票数 0
回答已采纳
1回答
因此，我正在尝试一些角度2，我喜欢它到目前为止。但我需要一些帮助来驾驭这片新天地。
我有一个表单来编辑用户的详细信息和旁边的列表与我的所有用户。当我单击列表中的一个用户时，我想用用户详细信息(setEditForm( user ))填充我的编辑用户表单。
我已经让它正常工作了。但我必须说，同时使用ngControl和ngModel感觉不太正确。但也许它是..。
这是做这件事的正确方法吗?还是我只是幸运地让它工作了？
@Component({
template: `
<form (ngSubmit)="editUser(f.value)" #f="ngF
浏览 1提问于2016-03-12得票数 8
回答已采纳
我已经创建了一个自定义组件，并希望为它创建一个自定义[(ngModel)]。假设我在一个组件中有这个：
<input [(ngModel)]="var1"> // (first input)
<my-custom-input [injectedNgModel]="var1"><my-custom-input>
在我的<my-custom-input>里我有这样的东西：
@Input() injectedNgModel: any;
...
<input [(ngModel)]="injectedNgMo
浏览 1提问于2018-11-30得票数 0
我使用ngModel进行双向绑定(在输入框中显示值，并在用户更改时更新模型的值)，它工作得很好。
<input
id="myInput"
name="myInput"
type="text"
[(ngModel)]="myModel && myModel.myProperty"
/>
从DB获取数据的代码-
this.getresponse$ = this.myService.serviceMethodName.subscribe(
(result: ModelType) =&
浏览 2提问于2020-10-07得票数 0
1回答
角primeNg下垂
、、、
我在表行的每一行上都有一个下拉列表，每次从下拉列表中选择一个选项时，所选的值都会在rest下拉列表中被更新为相同的值：
我的html代码：
<p-table....>
<ng-template pTemplate="body" let-user>
<tr>
current user permission: {{user.Permission}}
<p-dropdown [options]="PermissionOptions" [(ngM
浏览 21提问于2022-01-11得票数 0
回答已采纳
1回答
我正在尝试从httpClient服务器获取、发布、放置数据到棱角客户端--我使用ng模型进行输入，并将其绑定到按钮，.I在创建按钮时出错。我认为，在将输入数据分配给变量时存在一个问题。
component.html
<h1>Products:</h1>
<h1>{{products|json}}</h1>
<h1>Create Product</h1>
Id:<input type="number" (ngModel)="id"/><br/>
Name:<in
浏览 7提问于2022-07-30得票数 0
我有点困惑，一些教程使用#来获取输入，而另一些则使用[(ngModel)]。两者之间的有效区别是什么？
浏览 1提问于2017-04-05得票数 18
回答已采纳
HTML代码
<li class="dropdownfilter" *ngIf="this.arr.inclues('Male')" (click)="getValueGender('Male',1,)" [(ngModel)]="M"><a>Male</a></li>
我正面临下面的异常
ERROR Error: No value accessor for form control with unspecified name attribute
所以
浏览 0提问于2018-05-20得票数 3
我正在尝试绑定一个简单的select或ion-select，但目前，它还不起作用…… 我已经在模块和页面中导入了FormsModule： import { FormsModule } from '@angular/forms'; 但是仍然得到相同的错误： Can't bind to 'ngModel' since it isn't a known property of 'ion-select'. 视图如下所示： <ion-list>
<ion-list-header>Choix du jeu</i
浏览 30提问于2019-04-06得票数 0
在应用程序中，我使用一个编辑字段来显示和修改satoshi (例如：0.00000004)。
此字段通过[(ngModel)]链接到数据模型。数据类型是一个数字。
角(或者更确切地说是javascript或html)在加载科学符号时系统地翻译它：(例如：4e-8)
使用"text“或"number”的字段类型产生同样的效果。
是否有一种奇特的方法可以强制使用绑定到数据模型的字段来强制使用不科学的表示法，并且不更改数据模型？
问题的简单javascript示例：
const elText = document.getElementById("satoshiText"
浏览 4提问于2021-01-03得票数 2
回答已采纳
1回答
我想在惰性模式下加载一些数据。具体地说，假设我有一个这样的对象：
$scope.person = {
name: 'Stefano',
surname: 'Rossi',
address: 'Orange Road',
city: {
clazz: 'foo.bar.City',
id: 5,
lazy: true
}
}
使用angular，我可以毫无问题地将前三个属性绑定到html标签上。
<input ng-model="person.nam
浏览 12提问于2016-01-28得票数 1
4回答
我试图在angular2上做一些事情，但是我无法找到关于这种行为的一些东西。
我有一个实现自定义组件的应用程序，如下所示：
import {Component,Input} from 'angular2/core'
@Component({
selector:'my-comp',
template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}
浏览 7提问于2016-01-05得票数 16
回答已采纳
我对角很陌生，被(改变)事件和(ngModel)混淆了。它们都用于跟踪表单的状态吗？我可以使用ngModel作为(更改)或者哪个更好？问题是，当我有一个带有输入type="file“的表单时。
当我使用(ngModel) <input type="file" [(ngModel)]="link" name="link"/>并通过this.link获取值时。在后端，它返回一个空对象{}。
但是当我使用(更改) <input type="file" name="link" (change)=&
浏览 1提问于2019-12-29得票数 0
回答已采纳
3回答
我有一个角度组件，它提供输入框，以输入注释。我最初是这样做的：
<textarea class="comment-box" type="text" name="comment" value="{{_input.comment}}"></textarea>
这将使注释框预先填充现有的注释值(如果有注释的话)。效果很好。
现在，我为双向绑定添加ngModel，如下所示：
<textarea class="comment-box" type="text" name="
浏览 0提问于2019-07-25得票数 0
回答已采纳
1回答
<ckeditor [(ngModel)]="editorData" [editor]="Editor"></ckeditor>
如何使用ngmodel从html到组件获取从ckeditor输入的文本的值。我使用的是角8和ckeditor 5
浏览 2提问于2019-12-21得票数 0
我有一个组件双向绑定的例子。我成功地获得了父组件中的值，但是我需要为这些数据设置监听器，而且由于数据来自子组件，所以我不知道如何设置侦听器，比如(change)。
@Component({
selector: 'app-child',
template: `
<p>{{childData}}<br>
<input [(ngModel)]="childData" type="text" (ngModelChange)="onChildDataChange($event)"&g
浏览 1提问于2018-04-04得票数 0
回答已采纳
1回答
我在输入元素上应用日期管道
<div class="section">
<h6 style="font-weight:bold">From Date</h6>
<input [(ngModel)]="Schedule.FromDate | date:'fullDate'" type="text" class="datepicker">
</div>
但是它不起作用，经过一些搜索后，我在堆栈溢出上找到了一个帖子，并将其更改为
&
浏览 0提问于2018-05-01得票数 1
我正在创建新的应用程序，使用模板与抽屉导航
tns create HelloWorld --template tns-template-drawer-navigation-ng
接下来，在在线教程之后，我将测试双向数据绑定。按照上面的示例，在主页上，我有一个使用(ngModel)=" email“和TextField (tap)=signUp()绑定到电子邮件字段的按钮，我还将NativeScriptFormsModule添加到了NgModule的导入列表中。由于某些原因，双向数据绑定并不只是单向的。有没有人遇到过类似的问题？
浏览 16提问于2018-01-10得票数 0
回答已采纳
2回答
下面显示了字符串值可以工作，但是如果我的输入是一个数字，它就不能工作。除了将变量变成字符串之外，还有什么想法吗？
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<p>Model: {{model | json}}</p>
NOT WORKING<br/>
<input type="radio" name="foo"
浏览 23提问于2020-03-10得票数 0
回答已采纳
我在Angular 8中的一个组件html文件中有一个输入字段 <!-- simplified -->
<form>
<div *ngFor="let r of reviews">
<input name="Text" value="{{ r.reviewText }}" [(ngModel)]="r.reviewText" />
</div>
</form> (ngModel)更新(http )将数据很好地返回到数据库。问题是，在加载或重新加载页面
浏览 13提问于2020-01-09得票数 1
回答已采纳
我知道，在角度上，以下两条线在功能上是相同的
属性和事件绑定
<input type="text" [value]="customerName" (input)="customerName= $event.target.value" />
双向数据绑定
<input type="text" [(ngModel)]="customerName' />
令我困惑的是，角知道如何通过双向数据绑定绑定到输入 event的input元素，而不是input元素支持的任何其他事件？
在第一个示例中，代码专
浏览 1提问于2019-10-26得票数 1
回答已采纳
要将输入的值绑定到属性，我们使用ngModel指令。例如：
<input type='text' [(ngModel)]='model' />
为什么我们不能简单地对输入元素的value属性使用绑定呢？
<input type='text' [(value)]='model' />
浏览 3提问于2017-03-14得票数 4
回答已采纳
ngBind和ngModel确实非常相似:将模型(数据)绑定为静态文本元素或可变元素，例如文本输入框、选择元素或文本区域。
在这种情况下，如果只使用一个名称(比如ngModel )，让它对所有元素都有效(所以我们不需要ngBind)，这不是很有意义吗？
这几乎是一种多态，使用这种多态，ngModel对可变元素有一种行为，对于不可改变的元素有另一种行为。
浏览 0提问于2016-01-29得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
