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

当ngModel为对象时,ngValue不会重新填充单选输入

的原因是ngValue指令用于设置单选按钮的值,而ngModel指令用于绑定表单控件的值。当ngModel绑定的值是一个对象时,ngValue指令不会重新填充单选输入,因为ngValue指令只能设置基本类型的值。

举例来说,假设有一个单选按钮组,其中的每个单选按钮都使用ngValue指令设置了一个对象作为值。当用户选择其中一个单选按钮时,ngModel会将选中的单选按钮的ngValue值赋给绑定的对象。但是,当再次选择同一个单选按钮时,ngModel不会重新填充单选输入,因为ngValue指令只会设置基本类型的值,而不会重新填充对象。

解决这个问题的方法是使用ngModelChange事件来监听ngModel的变化,并在事件处理程序中手动更新单选输入的值。例如,可以在ngModelChange事件处理程序中将选中的单选按钮的ngValue值赋给一个临时变量,然后再将该临时变量赋给ngModel绑定的对象。

以下是一个示例代码:

代码语言:txt
复制
<ng-container *ngFor="let option of options">
  <input type="radio" [ngValue]="option" [(ngModel)]="selectedOption" (ngModelChange)="updateSelectedOption(option)">
  {{ option.label }}
</ng-container>
代码语言:txt
复制
selectedOption: any;

updateSelectedOption(option: any) {
  this.selectedOption = option;
}

在上述示例中,options是一个包含选项的数组,每个选项都是一个对象,包含label和value属性。selectedOption是ngModel绑定的对象,用于存储用户选择的选项。当用户选择一个单选按钮时,ngModelChange事件会触发updateSelectedOption方法,该方法将选中的选项赋给selectedOption变量,从而更新单选输入的值。

请注意,以上示例中没有提及腾讯云相关产品和产品介绍链接地址,因为这些内容与ngModel、ngValue等Angular框架相关的概念没有直接关联。如果您需要了解腾讯云的相关产品和服务,请参考腾讯云官方文档或咨询腾讯云的技术支持团队。

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

相关·内容

AngularDart 4.0 高级-结构指令 顶

条件false,NgIf从DOM中删除它的宿主元素,将它从DOM事件(它所依附的)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确的。...这些是两个NgFor输入属性的名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 NgFor指令遍历列表,它会设置并重置其自己的上下文对象的属性。...Angular不会允许。 您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂的事情。 两个指令声明相同的宿主元素,哪一个优先?... 条件,出现顶部(A)段落并且底部(B)段落消失。 条件,顶部(A)段被删除,底部(B)段出现。 ? 概要 您可以尝试在实例中查看本指南的源代码(查看源代码)。

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

    中被销毁,并且所有监听该 dom 元素的事件会被取消,重新显示该元素,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的,再次显示不用重新进行初始化过程...4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过在组件中添加一个方法,指定循环需要跟踪的属性值,此时渲染的数据发生改变,只会重新渲染变更了指定的属性值的数据 ...的,将属性赋值 null,则会编译报错 ?...name}} 非空断言运算符不会防止出现 null 或 undefined,只是不提示 4.3.2、常用的管道函数 纯管道 只有在它检测到输入值发生了纯变更才会执行,但是会忽略对象内部的变更...,因此像 push、unshift 这样的方法即使不添加 trackBy 也不会重新渲染整个 DOM,只会重新渲染改变的数据↩

    15.8K30

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

    模板表达式计算结果true,Angular会添加类。 表达式false,它将删除类。 <!...NgModel - 与[(ngModel)]形成元素的双向绑定 在开发数据输入表单,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...表达式false,NgIf从DOM中删除HeroDetailComponent,销毁该组件及其所有子组件。 在Dart模式下,Dart期望布尔值(类型bool的)true或false。...例如,重新查询服务器可能会重置所有新的英雄对象的列表。 大多数,如果不是全部,以前显示的英雄。 你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。...不幸的是,currentHero,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!

    29.9K20

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

    四、Step by Step 4.1、表单简介 用来处理用户的输入,通过从视图中捕获用户的输入事件、验证用户输入的是否满足条件,从而创建出表单模型修改组件中的数据模型,达到获取用户输入数据的功能 模板驱动表单...4.2.3、数据的有效性验证 某些时候需要对于用户输入的信息做有效性验证,此时可以在控件上添加上原生的 HTML 表单验证器来设定验证条件,表单控件的数据发生变化时,angular 会通过指令的方式对数据进行验证...,从而生成错误信息列表 在进行用户输入数据有效性验证,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...,返回 null,数据无效,则会返回一个对象信息,这里的 nameinvalid 就是我们在模板中获取到的错误信息的 key 值 <label...因此这里的验证方法需要在定义控件组作为 FormGroup 的参数传入 与单个字段的验证方式相似,通过实现 ValidatorFn 接口,表单数据有效,它返回一个 null,否则返回 ValidationErrors

    18.9K20

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

    原文:https://zhuanlan.zhihu.com/p/58787662 双向数据绑定是AngularJs的一大卖点,当初问世开发人员无不惊讶,“Wow, it's so crazy"。...写法上略有不同,目的和实现的效果却是一样的,js或ts文件中的name值发生变化时,html模板中的值会发生改变,反之,当用户在input中输入值的时候,js或ts文件中name的值也会发生相应的改变...input元素上会产生input事件,通过监听这个事件把name重新赋值。 与其关心双向绑定等黑魔法(实际还算不上黑魔法),倒不如去关心‘输入和输出’。...依然是有输入,有输出,只不过属性名称由value变成了ngModel,事件名称由input变成了ngModelChange。...在不看源码的情况下,如果是让你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素的value值关联起来。

    4.4K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    set_platform() { this.platform console.log('this.platform:',this.platform) } 5、input事件在用户输入时触发...count提供当前数据集的长度,类似于datasource.length first返回当前列表项是否第一个 last返回当前列表项是否最后一个 even返回当前列表项index是否偶数,通常用在增加样式用来区分行与行之间...ng-cloak 在应用正要加载防止其闪烁 ng-controller 定义应用的控制器对象 ng-copy 规定拷贝事件的行为 ng-csp 修改内容的安全策略 ng-cut 规定剪切事件的行为...ng-mouseenter 规定鼠标指针穿过元素的行为 ng-mouseleave 规定鼠标指针离开元素的行为 ng-mousemove 规定鼠标指针在指定的元素中移动的行为 ng-mouseover...ng-switch 规定显示或隐藏子元素的条件 ng-transclude 规定填充的目标位置 ng-value 规定 input 元素的值 https://www.runoob.com/angularjs

    5.3K41

    CompoundButton

    按钮被按下或点击,状态会自动改变。 这是一个抽象类,目前有的子类有 复选框,单选按钮,开关,切换按钮。 复选框 复选框是一种特定类型的双状态按钮,可以选中或取消选中。...void drawableHotspotChanged(float x, float y) 每当视图热点发生变化并需要传播到由视图管理的可绘制对象或子视图,就会调用此函数。...int getAutofillType() 描述此视图的自动填充类型,因此 AutofillService可以AutofillValue 在自动填充视图创建正确的类型。...void setButtonDrawable(int resId) 给定资源标识符,将可绘制对象设置复合按钮图像。...toggle() 将视图的选中状态更改为与其当前状态相反的状态 CompoundButton的受保护的方法 void drawableStateChanged() 每当视图的状态发生变化以影响显示的可绘制对象的状态

    2K20

    Angularjs的表单验证

    输入框,并且将对象绑定在$scope对象的signup.name对象上(通过ng-model)。...现在,我们将看到那些没有通过的验证的错误信息。...虽然及时验证很棒,它可以立即提醒用户,但是他们正在输入很长的能通过验证的文字,他们将在输入中途看到错误提示。有更好的方式来处理验证:当用户点击提交,或者他们将光标移开输入框之后。...失去焦点验证错误 如果你想保留错误验证的实时性,那么可以在用户离开该输入显示错误信息。要做到这一点,我们可以添加一个指令,将添加一个新的变量。...blur和focus事件中注册相应操作,焦点在该输入,它添加一个class(ng-focused),并且该输入框的$focused属性也将变为true。

    2.2K10

    Angular系列教程-第四节

    两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...)]来将表单的数据和和视图进行双向绑定,NgForm 指令 form 增补了一些额外特性。...使用 HTML5 的 minlength 属性,此验证器也会生效。 maxLength 此验证器要求控件值的长度小于等于所指定的最大长度。...使用 HTML5 的 maxLength 属性,此验证器也会生效。 pattern 此验证器要求控件的值匹配某个正则表达式。使用 HTML5 的 pattern 属性,它也会生效。

    2.8K50

    AngularDart4.0 指南- 表单 顶

    使用ngModel双向数据绑定语法将数据属性绑定到每个表单控件。 每个表单输入控件添加一个ngControl指令。 添加自定义CSS来提供视觉反馈。 显示和隐藏验证错误消息。...样式控件 有效的控制属性是最有趣的,因为一个控制值无效,你想发送一个强烈的视觉信号。 要创建这样的视觉反馈,您将使用Bootstrap自定义表单类 is-valid和is-invalid。...您将name设置“ngForm”,因为ngModel指令的exportAs属性是“ngForm”。 刷新浏览器,然后按照下列步骤操作: 1.看看名字输入。 它有一个绿色的边框。...控件是“原始的”隐藏消息实现了这个目标。 您向表单添加一个“清除”按钮,您会看到此选项的重要性。 英雄Alter Ego是可选的,所以你可以不用关那个。 英雄power选择是必需的。...您单击编辑按钮,该表消失,并且可编辑的表单重新出现。 概要 Angular表单数据修改,验证等提供支持。

    17.5K30

    Vue 相关学习笔记(一)

    ,作用于插值表达式类似,但是没有闪动问题 如果数据中有HTML标签会将html标签一并输出 注意:此处单向绑定,数据对象上的值改变,插值会发生变化;但是插值发生变化并不会影响数据对象的值 <div...-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 某一个单选框选中的时候...2', '3'], desc: 'nihao' }, }) 表单修饰符 .number 转换为数值 注意点: 开始输入非数字的字符串...} }); 侦听器 watch 使用watch来响应数据的变化 一般用于异步或者开销较大的操作 watch 中的属性 一定是data 中 已经存在的数据 需要监听一个对象的改变...该方法并不会修改数组,而是返回一个子数组 动态数组响应式数据 Vue.set(a,b,c) 让 触发视图重新更新一遍,数据动态起来 a是要更改的数据 、 b是数据的第几项、 c是更改后的数据 图书列表案例

    7.5K20
    领券