首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用Javascript改变输入值后,如何强制Angular 2 [(ngModel)]改变?

在Angular 2中,可以使用ngModelChange事件来强制改变[(ngModel)]的值。当输入值发生变化时,可以通过触发ngModelChange事件来更新[(ngModel)]的值。

以下是一种实现方式:

  1. 在HTML模板中,使用(ngModelChange)绑定一个方法来处理输入值的变化,例如:
代码语言:txt
复制
<input type="text" [(ngModel)]="inputValue" (ngModelChange)="onInputChange($event)">
  1. 在组件的代码中,定义onInputChange方法来处理输入值的变化,并在该方法中更新[(ngModel)]的值,例如:
代码语言:txt
复制
export class YourComponent {
  inputValue: string;

  onInputChange(newValue: string) {
    // 处理输入值的变化
    // 可以在这里进行一些逻辑操作或者数据处理

    // 更新[(ngModel)]的值
    this.inputValue = newValue;
  }
}

通过这种方式,当输入值发生变化时,onInputChange方法会被调用,并且可以在该方法中更新[(ngModel)]的值,从而强制改变Angular 2中的双向绑定。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 6.x 表单快速入门

第一节 - 创建最简单的输入如何实现双向绑定? 在 Angular 表单中,我们通过 ngModel 指令来实现双向绑定。...如何获取表单提交的? 在 Angular 中,我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象,然后通过 loginForm.value 来获取表单的。...ngModelGroup 指令是 Angular 表单中提供的另一特殊指令,可以对表单输入内容进行分组,方便我们在语义上区分不同性质的输入。...表单控制的状态: valid - 表单控件有效 invalid - 表单控件无效 pristine - 表单控件改变 dirty - 表单控件改变 touched - 表单控件已被访问过 untouched... Name控件的dirty状态:{{userName.dirty}} - 表示控件改变 Name控件的touched状态:{{userName.touched

4.6K20
  • Angular 从入坑到挖坑 - 组件食用指南

    一、Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...,可以通过 angular 内置的模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们的应用逻辑和数据来渲染页面 4.1.2.1、插表达式 插表达式可以将组件中的属性或者是模板上的数据通过模板表达式运算符进行计算...而是通过它所控制的两个结构型指令(NgSwitchCase、ngSwitchDefault)来操作 dom 元素 4.3、管道 在使用模板表达式绑定数据时,可以使用管道对于表达式的结果进行转换 管道是一种简单的函数,它们接受输入并返回转换...被绑定的输入属性发生变化时触发,会调用多次;如果没有使用到父子组件传,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成调用一次 ngAfterContentChecked 只要组件的内容发生改变就会被调用 ngAfterViewInit 视图加载完成触发一次,

    15.8K30

    Angular—都2019了,你还对双向数据绑定念念不忘

    写法上略有不同,目的和实现的效果却是一样的,当js或ts文件中的name发生变化时,html模板中的会发生改变,反之,当用户在input中输入的时候,js或ts文件中name的也会发生相应的改变...Angular中的’双向数据绑定‘ 没有黑魔法 Angular努力拥抱web标准,不创造新名词,也不使用什么黑魔法,那么双向绑定是如何实现的呢?事实上通过属性绑定和事件,这并不难做到。...在不看源码的情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素的value关联起来。...2. input的发生变化需要使用 ngModelChange 把它发送出来,那ngModelChange肯定是一个EventEmitter。 3....自定义双向绑定 按照上面的思路,实现一个双向绑定的步骤: 定义一个输入属性(如:name)。 2. 定义一个输出属性,名称就是输入属性名加‘Change’后缀(如:nameChange)。 3.

    4.4K30

    AngularDart4.0 指南- 模板语法二 顶

    如何输入框中提取当前显示的文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己的ngModel输入属性和ngModelChange输出属性背后的这些繁重的细节。...Angular为所有基本的HTML表单元素提供访问器,Forms指南展示了如何绑定到它们。...以下人为的例子强制输入为大写: <input [ngModel]="currentHero.name" (ngModelChange)="setUppercaseName($event)">...电话按钮点击处理程序将输入传递给组件的callPhone方法。但是一个指令可以改变这种行为,并将其设置为别的东西,比如本身。 NgForm指令这样做。 以下是Forms指南中表单示例的简化版本。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好的选择。 管道是简单的函数,它接受一个输入并返回一个转换

    29.9K20

    Angular核心概念:数据绑定

    :[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...对象属性就是CSS class名,属性为ture/false,turn的话该class就出现;否则该class不出现 (4)事件绑定() (click)=“zengjia”; 注意:事件名()括起来...,处理函数名必须有() (5)双向数据绑定指令:[(ngModel)]—重点 方向1:Model=》View,模型变则视图变,[]绑定 方向2:View=》Model,视图(表单元素)变则模型变,...-- ngModel现在不能识别,需要导入依赖 --> 注意:直接使用ngModel会直接报错,原因是没有导入模块...--Angular专用事件:“模型数据改变”ngModelChange-->> 当前的用户绑定{{uname}} ts文件 改变打印在控制台上 uname="dingding";

    3.5K10

    AngularDart4.0 指南- 表单 顶

    本页面向您展示了如何从头构建一个简单的表单。一路上你将学习如何组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制的双向数据绑定。...你知道如何从早期的页面做到这一点。 显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件,是否改变,或者该是否失效。...每个Angular控制(NgControl)都跟踪自己的状态,并通过以下字段成员使状态可供检查: dirty和pristine表明控制的是否已经改变。...文本字段变为空白,如果您更改了power,它将恢复为默认ngSubmit提交表单 用户应该能够在填写表单提交这个表单。

    17.5K30

    Angular系列教程-第四节

    1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...总结 响应式表单是动态的,模板驱动表单是固定的 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件的(获取setvalue...3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4.内置验证器 min 此验证器要求控件的大于或等于指定的数字 max 此验证器要求控件的小于等于指定的数字...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1

    2.8K50

    AngularDart 4.0 高级-管道 顶

    管道类实现了PipeTransform接口的transform方法,该方法接受一个输入,后跟一个可选参数并返回转换。 对于传递给管道的每个参数,transform方法都会有一个额外的参数。...注意如何添加一个英雄: heroes.add(hero); 您将英雄添加到英雄列表中。 对列表的引用没有改变。 这是同一个列表。 这都是Angular关心的。...纯净的管道 仅当Angular检测到对输入的纯粹更改时才执行纯管道。 在AngularDart中,纯粹的改变仅仅来自对象引用的改变(假设所有东西都是Dart中的对象)。...纯函数处理输入并返回,但没有可检测到的副作用。 给定相同的输入,他们应该总是返回相同的输出。 本页前面讨论的管道是纯函数实现的。 内置的DatePipe是一个纯函数实现的纯管道。...否则,你会看到很多关于表达式被检查改变的控制台错误。 下一步 管道是封装和共享常见显示转换的好方法。 像样式一样使用它们,将它们放入模板表达式中,以丰富视图的吸引力和可用性。

    6.3K20

    Angular 从入坑到挖坑 - 表单控件概览

    一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何angular 中创建一个表单,以及如何针对表单控件进行数据校验。...四、Step by Step 4.1、表单简介 用来处理用户的输入,通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令和 name 属性的元素,而...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...,第一个为控件的默认,第二项和第三项则是针对这个设定的同步、异步验证方法 import { Component, OnInit } from '@angular/core'; // 引入 FormBuilder

    18.9K20
    领券