2017-06-09 11 views
1

Angular Materialフレームワークを使用しているプロジェクトで、入力フィールドに電話番号の書式設定にAngular UI Maskを使用しようとしています。私は個々に作業することができます(マテリアルラベルはマスクなしで正常に動作し、マスクはマテリアルラベルなしで正常に機能します)。私はそれらを一緒に働かせることができません。どこで入力フィールドのプレースホルダに "Phone Number"を読み込ませ、そのプレースホルダを入力の上にあるラベルに移動させてマスクがテキストボックスに表示されます。私はこれらを動作させるための唯一の方法として、プレースホルダとラベルを同時に表示します。AngularUIマスクをAngular Materialと併用するには

コードは単純です:

<md-input-container> 
     <label>Phone Number</label> 
     <input aria-label="Phone Number" id="phone" name="phone" type="text" ng-value="phone" ng-model="phone" ui-mask="(999) 999-9999" ui-mask-placeholder placeholder="Phone Number"> 
</md-input-container> 

ここPlunkerだ:http://plnkr.co/edit/fXIRnKwdnBPwEODYuTBP

答えて

2

追加:

ui-options={addDefaultPlaceholder:false} 

onBlurイベントが発生するまで、これは、入力マスクを非表示にします。

ラベルの有無にかかわらず動作します。

ここにはプランカがあります。http://plnkr.co/edit/TQxPE2XLG5on1JSKHRHq?p=preview