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

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应用中输入的最小值和最大值所遇到的程序开发问题。