2017-07-17 10 views
1

入力でmdエラーが最小/最大で発生していません。しかし、それは '必須'のために働いている。数字入力で最大/最小値でmdエラーが発生しない

私は、material.moduleをapp.module.tsのNgModuleにインポートしました。

HTML:

<div class="form-group"> 
       <md-input-container> 
       <input mdInput id="useramount" 
         name="useramount" 
         type="number" 
         class="form-control " 
         [(ngModel)]="amount" 
         #useramount="ngModel" 
         placeholder="amount" 
         min="{{40 | number}}" 
         max="{{300 | number}}" 
         required/> 
       <md-error *ngIf="amountFormControl.hasError('required')"> 
        <span>{{'NOT_VALID_FIELD'| translate}} </span> 
       </md-error> 
       <md-error *ngIf="amountFormControl.hasError('min')" 
        > 
        <span>{{'FIELD_MIN_VAL'| translate}}</span> 
       </md-error> 
       <md-error *ngIf="amountFormControl.hasError('max')" 
          > 
        <span>{{'FIELD_MAX_VAL'| translate}}</span> 
       </md-error> 
       </md-input-container> 
      </div> 

TSファイル:

public amountFormControl = new FormControl('', [Validators.min(40), Validators.required, Validators.max(300)]); 
+0

使用している材料のバージョンはわかりませんが、MaterialModule は、ベータ3では廃止されました。個々のモジュールをインポートする必要があります。あなたの場合は、MdInputModuleをインポートする必要があります。独自のモジュールを作成して、アプリケーションで使用するすべてのマテリアルモジュールをインポートおよびエクスポートし、そのモジュールをアプリケーションモジュールにインポートすることができます。 – Rama

+0

@Ramaを使用してbeta.8!それは私のために働いている必要がありますが、私は最小と最大のValidatorsオブジェクトからインテリセンスを得る!彼らについての任意の文書を見つけることができなかったtho !!入力タイプ番号に対してこの検証を行う他のオプションはありますか? – Hazu

答えて

0

代わりminmaxminlengthmaxlengthを使用してみてください。

それはAngular docsのドキュメントです。

角型には、フォームで一般的なユーザー入力を確認するための関数である、多数の組み込みバリデータ関数が含まれています。 minlengthmaxlength、およびrequiredに含まれている組み込みバリデータに加えて、とpatternのような反応形式があります。

関連する問題