[Angular Form] ngModel and ngModelChange
When using Radio button for Tamplate driven form, we want to change to the value change and preform some action.
import { Component, Input } from '@angular/core'; import { Passenger } from '../../models/passenger.interface'; @Component({
selector: 'passenger-form',
styleUrls: ['passenger-form.component.scss'],
template: `
<form #form="ngForm" novalidate>
{{ detail | json }}
<div>
Passenger name:
<input
type="text"
name="fullname"
[ngModel]="detail?.fullname">
</div>
<div>
Passenger ID:
<input
type="number"
name="id"
[ngModel]="detail?.id">
</div>
<div>
<label>
<input
type="radio"
[value]="true"
name="checkedIn"
[ngModel]="detail?.checkedIn"
(ngModelChange)="toggleCheckIn($event)">
Yes
</label>
<label>
<input
type="radio"
[value]="false"
name="checkedIn"
[ngModel]="detail?.checkedIn"
(ngModelChange)="toggleCheckIn($event)">
No
</label>
</div>
<div *ngIf="form.value.checkedIn">
Check in date:
<input
type="number"
name="checkInDate"
[ngModel]="detail?.checkInDate">
</div>
{{ form.value | json }}
</form>
`
})
export class PassengerFormComponent {
@Input()
detail: Passenger;
toggleCheckIn(checkedIn: boolean) {
if (checkedIn) {
this.detail.checkInDate = Date.now();
}
}
}
[Angular Form] ngModel and ngModelChange的更多相关文章
- Angular - - form.FormController、ngModel.NgModelController
form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. ...
- Angular: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as ‘standalone’ in ngModelOptions.
在Angular中,动态生成的Html控件,如果没有name属性并且在ts中要操作Model的内容.就会引发如题的错误. 解决方案两个: 加上name的属性 设置ngModelOptions [n ...
- 细说angular Form addControl方法
在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...
- angular form 验证
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular form 验证 ngMessage
<!DOCTYPE HTML> <html ng-app="deliciousApp"> <head> <meta charset=&qu ...
- Angular form
参考 http://blog.xebia.com/2013/10/15/angularjs-validating-radio-buttons/ http://stackoverflow.com/que ...
- angular中ng-model,返回数据,拆分数据,展示,名称相同,重新赋值会有冲突
本问题出在angular,1.X版本,我用的是1.5的版本: 问题原因: <input type="number" ng-mode="a" /> & ...
- angular form set dynamic control(form动态设置control)
实现效果 form表单控件的实时更新 效果如图 关键代码 validateForm: FormGroup; // 表单校验 constructor( private fb: FormBuilder ) ...
- [Angular 2] ng-model and ng-for with Select and Option elements
You can use Select and Option elements in combination with ng-for and ng-model to create mini-forms ...
随机推荐
- 判断移动端跳转,从移动端来的不跳转。利用localStorage保存状态,window.location.pathname跳转不同的url
手机访问 www.yourdomain.com 跳转,从m.yourdomain.com来的不跳转. 访问www.yourdomain.com/category8, 跳转到m.yourdomain.c ...
- Appium_pytest fixture的使用
一.定义fixture方法 # -*- coding:utf-8 -*-import pytestfrom baseutil.DriverUtil import DriverConfig @pytes ...
- 【Codeforces Round #453 (Div. 2) C】 Hashing Trees
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然只有当a[i]和a[i-1]都大于1的时候才会有不同的情况. a[i] >= a[i-1] 且a[i-1]>=2 则 ...
- 从数据库中生成XML文件
前台页面<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
In this lesson we will understand the For Of loop in Javascript which was introduced in ES6. The for ...
- Android代码模拟物理、屏幕点击事件
一.应用中模拟物理和屏幕点击事件 例如,模拟对某个view的点击事件 private void simulateClick(View view, float x, float y) { long do ...
- 关于python的序列和矩阵运算的写法
#其实下面是这样一个函数,传入的是obj_value,传出的是newobj_value.,, #这里的obj_value实际上是一个序列... for z in obj_value: ...
- Eclipse如何从导入SVN上导入项目
1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...
- 调色板原理 & 编程
调色板原理 & 编程 逻辑调色板结构LOGPALETTE,该结构定义如下: typedef struct tagLOGPALETTE { WORD palVersion; //调色板的板本号, ...
- Altium Designer如何统一改变pcb状态下的原件标号位置
原创 我用的是Altium Designer16版本 变成 步骤如下: 选中标号 右击 下边一步很重要: 点击应用和确定 在之后弹出的对话框中选则你要改变的位置,我这里是把标号改变到原件的右侧: 等待 ...