angular4应用中输入的最小值和最大值的方法


Posted in Javascript onMay 17, 2019

Angular4输入属性

输入属性通常用于父组件向子组件传递信息

举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order

首先在app.order.component.ts中声明需要由父组件传递进来的值

order.component.ts

...

@Input()

stockCode: string

@Input()

amount: string

...

order.component.html

<p>这里是子组件</p>

<p>股票代码为{{stockCode}}</p>

<p>股票总数为{{amount}}</p>

然后我们需要在父组件(app.component)中向子组件传值

app.component.ts

...

stock: string

...

app.component.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">

<app-order [stockCode]="stock" [amount]="100"></app-order>

这里我们使用了Angular的双向数据绑定,将用户输入的值和控制器中的stock进行绑定。然后传递给子组件,子组件接收后在页面显示。

Angular4输出属性

当子组件需要向父组件传递信息时需要用到输出属性。

举个栗子:当我们从股票交易所获得股票的实时价格时,希望外部也可以得到这个信息。为了方便,这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote

使用EventEmitter从子组件向外发射事件

price.quote.ts

export class PriceQuoteComponent implements OnInit{

 stockCode: string = 'IBM';

 price: number;

 //使用EventEmitter发射事件

 //泛型是指往外发射的事件是什么类型

 //priceChange为事件名称

 @Output()

 priceChange:EventEmitter<PriceQuote> = new EventEmitter();

 constructor(){

 setInterval(() => {

  let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());

  this.price = priceQuote.lastPrice;

  //发射事件

  this.priceChange.emit(priceQuote);

 })

 }

 ngInit(){

 }

}

//股票信息类

//stockCode为股票代码,lastPrice为股票价格

export class PriceQuote{

 constructor(public stockCode:string,

  public lastPrice:number

 )

}

price.quote.html

<p>

 这里是报价组件

</p>

<p>

 股票代码是{{stockCode}}

</p>

<p>

 股票价格是{{price | number:'2.2-2'}}

</p>

接着我们在父组件中接收事件

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>

<p>

 这是在报价组件外, 股票代码是{{priceQuote.stokcCode}},

 股票价格是{{priceQuote.lastPrice | number:'2.2-2'}}

</p>

事件绑定和原生的事件绑定是一样的,都是将事件名称放在()中。

app.component.ts

export class AppComponent{

 priceQuote:PriceQuote = new PriceQuote('', 0);

 priceQuoteHandler(event:PriceQuote){

 this.priceQuote = event;

 }

}

这里的event类型就是子组件传递事件的类型。

angular4应用中输入的最小值和最大值的方法

我有一个带有表单的angular4应用程序.在这个我输入一个百分比输入.所以,我想用0到100之间的值来阻止输入.

我试图添加min =“0”和max =“100”,但我仍然可以输入一个高于100或小于0的数字.

模板

<md-input-container>
 <input type="number" 
  maxlength="3" 
  min="0" 
  max="100" 
  required 
  mdInput 
  placeholder="Charge" 
  [(ngModel)]="rateInput" 
  name="rateInput">
 <md-error>Required field</md-error>
</md-input-container>

你知道我怎么做吗?

解决方法

我成功地使用了表单控件.

这是我的HTML代码:

<md-input-container>
    <input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
    <md-error>Please enter a value between 0 and 100</md-error>
  </md-input-container>

在我的打字稿代码中,我有:

this.rateControl = new FormControl("",[Validators.max(100),Validators.min(0)])

因此,如果我们输入的值大于100或小于0,则材料设计输入变为红色且该字段未验证.所以之后,如果值不好,我点击保存按钮时就不保存.

总结

以上是三水点靠木为你收集整理的angular4应用中输入的最小值和最大值全部内容,希望文章能够帮你解决angular4应用中输入的最小值和最大值所遇到的程序开发问题。

Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
详解 微信小程序开发框架(MINA)
May 17 #Javascript
Vue模板语法中数据绑定的实例代码
May 17 #Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
微信小程序云开发详细教程
May 16 #Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 #Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 #Javascript
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php post换行的方法
2020/02/03 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
Angularjs 事件指令详细整理
2017/07/27 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
小程序实现展开/收起的效果示例
2018/09/22 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
对python3新增的byte类型详解
2018/12/04 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
如何提高python 中for循环的效率
2020/04/15 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
安全生产责任书
2014/03/12 职场文书
关于环保的建议书400字
2014/03/12 职场文书
经营目标管理责任书
2014/07/25 职场文书
化学工程专业求职信
2014/08/10 职场文书
简单租房协议书范本
2014/08/20 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL