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

...

@Input()

stockCode: string

@Input()

amount: string

...

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

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

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

...

stock: string

...

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

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

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, 100Math.random());

  this.price = priceQuote.lastPrice;

  //发射事件

  this.priceChange.emit(priceQuote);

 })

 }

 ngInit(){

 }

}

//股票信息类

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

export class PriceQuote{

 constructor(public stockCode:string,

  public lastPrice:number

 )

}

<p>

 这里是报价组件

</p>

<p>

 股票代码是{{stockCode}}

</p>

<p>

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

</p>

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

<p>

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

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

</p>

export class AppComponent{

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

 priceQuoteHandler(event:PriceQuote){

 this.priceQuote = event;

 }

}

<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>

<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)])