angular4應(yīng)用中輸入的最小值和最大值的方法
Angular4輸入屬性
輸入屬性通常用于父組件向子組件傳遞信息
舉個(gè)栗子：我們?cè)诟附M件向子組件傳遞股票代碼，這里的子組件我們叫它app-order
首先在app.order.component.ts中聲明需要由父組件傳遞進(jìn)來的值
order.component.ts
... @Input() stockCode: string @Input() amount: string ...
order.component.html
<p>這里是子組件</p>
<p>股票代碼為{{stockCode}}</p>
<p>股票總數(shù)為{{amount}}</p>
然后我們需要在父組件(app.component)中向子組件傳值
app.component.ts
... stock: string ...
app.component.html
<input type="text" placeholder="請(qǐng)輸入股票代碼" [(ngModel)]="stock"> <app-order [stockCode]="stock" [amount]="100"></app-order>
這里我們使用了Angular的雙向數(shù)據(jù)綁定，將用戶輸入的值和控制器中的stock進(jìn)行綁定。然后傳遞給子組件，子組件接收后在頁(yè)面顯示。
Angular4輸出屬性
當(dāng)子組件需要向父組件傳遞信息時(shí)需要用到輸出屬性。
舉個(gè)栗子：當(dāng)我們從股票交易所獲得股票的實(shí)時(shí)價(jià)格時(shí)，希望外部也可以得到這個(gè)信息。為了方便，這里的實(shí)時(shí)股票價(jià)格我們通過一個(gè)隨機(jī)數(shù)來模擬。這里的子組件我們叫它app.price.quote
使用EventEmitter從子組件向外發(fā)射事件
price.quote.ts
export class PriceQuoteComponent implements OnInit{
stockCode: string = 'IBM';
price: number;
//使用EventEmitter發(fā)射事件
//泛型是指往外發(fā)射的事件是什么類型
//priceChange為事件名稱
@Output()
priceChange:EventEmitter<PriceQuote> = new EventEmitter();
constructor(){
setInterval(() => {
let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
this.price = priceQuote.lastPrice;
//發(fā)射事件
this.priceChange.emit(priceQuote);
})
}
ngInit(){
}
}
//股票信息類
//stockCode為股票代碼，lastPrice為股票價(jià)格
export class PriceQuote{
constructor(public stockCode:string,
public lastPrice:number
)
}
price.quote.html
<p>
這里是報(bào)價(jià)組件
</p>
<p>
股票代碼是{{stockCode}}
</p>
<p>
股票價(jià)格是{{price | number:'2.2-2'}}
</p>
接著我們?cè)诟附M件中接收事件
app.component.html
<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
這是在報(bào)價(jià)組件外， 股票代碼是{{priceQuote.stokcCode}}，
股票價(jià)格是{{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應(yīng)用中輸入的最小值和最大值的方法
我有一個(gè)帶有表單的angular4應(yīng)用程序.在這個(gè)我輸入一個(gè)百分比輸入.所以,我想用0到100之間的值來阻止輸入.
我試圖添加min =“0”和max =“100”,但我仍然可以輸入一個(gè)高于100或小于0的數(shù)字.
模板
<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,則材料設(shè)計(jì)輸入變?yōu)榧t色且該字段未驗(yàn)證.所以之后,如果值不好,我點(diǎn)擊保存按鈕時(shí)就不保存.
總結(jié)
以上是腳本之家為你收集整理的angular4應(yīng)用中輸入的最小值和最大值全部?jī)?nèi)容，希望文章能夠幫你解決angular4應(yīng)用中輸入的最小值和最大值所遇到的程序開發(fā)問題。
相關(guān)文章
本篇文章主要介紹了淺談angular.copy() 深拷貝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
Angular項(xiàng)目過大時(shí)的合理拆分angular?split
這篇文章主要為大家介紹了Angular項(xiàng)目過大時(shí)的合理拆分angular?split示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
AngularJS ng-repeat數(shù)組有重復(fù)值的解決方法
不知道大家是否遇到過這個(gè)問題，在當(dāng)Angular.JS ng-repeat數(shù)組中有重復(fù)項(xiàng)時(shí)，系統(tǒng)就會(huì)拋出異常，這是該怎么做？本文通過示例代碼介紹了詳細(xì)的解決方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于Angular學(xué)習(xí)教程之RouterLink花式跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
angularjs功能在項(xiàng)目開發(fā)中經(jīng)常會(huì)用到，本文給大家總結(jié)了八種angularjs最常用的功能，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了AngularJS實(shí)現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對(duì)angularjs實(shí)現(xiàn)全選反選相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了AngularJS基礎(chǔ)知識(shí),包括AngularJS定義和特點(diǎn)以及構(gòu)建AngularJS應(yīng)用的方法，推薦給大家。2014-12-12
Angular重構(gòu)數(shù)組字段的解決方法示例
這篇文章主要為大家介紹了Angular重構(gòu)數(shù)組字段的解決方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09