バリデーターの最小値と最大値の角度4

Question

バリデーターの最小値と最大値を設定するオプションはありますか？

ダイアログ結果-component.ts

import { Component, OnInit } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { FormGroup,FormControl,Validators,FormBuilder, } from '@angular/forms'; 



@Component({ 
    selector: 'app-dialog-result', 
    templateUrl: './dialog-result.component.html', 
}) 

export class DialogResultComponent { 


    form: FormGroup; 
    name = new FormControl('',Validators.required); 
    width = new FormControl('',Validators.required); 
    height = new FormControl('',Validators.required); 
    constructor(public dialogRef: MdDialogRef<DialogResultComponent>,private fb: FormBuilder) { 

    } 

    ngOnInit() { 
    this.form = this.fb.group({ 
     'name': this.name, 
     'width': this.width, 
     'height': this.height, 
    }); 
} 

    saveData(){ 
    this.dialogRef.close({name:this.name,width:this.width,height:this.height}); 
    } 
} 

ダイアログresult.component.html

 <form [formGroup]="form"> 
    <h3>MineSweeperwix</h3> 
     <div class="mdl-dialog__content"> 
       <p><mdl-textfield type="text" label="name" formControlName="name" floating-label autofocus></mdl-textfield></p> 
       <mdl-textfield type="number" formControlName="width" min="0" max="350" label="width" floating-label autofocus></mdl-textfield> 
       <mdl-textfield type="number" formControlName="height" label="height" min="0" max="350" floating-label autofocus error-msg="'Please provide a correct email!'"></mdl-textfield> 
     </div> 
     <div class="mdl-dialog__actions"> 
     <button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple [disabled]="!form.valid">Save</button> 
     <button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple>Cancel</button> 
     </div> 
    </form> 

MDL-テキストフィールドに最小と最大

min="0" max="200" floating-label autofocus 

範囲内の数字を書き込むようにユーザーを制限しますが、保存ボタンを押すことができます 行う。私はすべてのフォームが有効である場合だけ、ユーザーが保存ボタンを押すことができます。私がしようとしたものを

は

dialog.result.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MdDialog, MdDialogRef } from '@angular/material'; 
import { FormGroup,FormControl,Validators,FormBuilder,ValidatorFn,AbstractControl } from '@angular/forms'; 
import { NumberValidators } from '../validators/NumberValidators.module'; 


@Component({ 
    selector: 'app-dialog-result', 
    templateUrl: './dialog-result.component.html', 
}) 

export class DialogResultComponent { 


    form: FormGroup; 
    name = new FormControl('',Validators.required); 
    width = new FormControl('',[Validators.required,NumberValidators.range(3,300)]); 
    height = new FormControl('',[Validators.required,NumberValidators.range(3,300)]); 
    constructor(public dialogRef: MdDialogRef<DialogResultComponent>,private fb: FormBuilder) { 

    } 

    ngOnInit() { 
    this.form = this.fb.group({ 
     'name' :this.name, 
     'width': this.width, 
     'height': this.height 
    }); 
} 

    saveData(){ 
    console.log(this.name.value); 
    this.dialogRef.close({name:this.name.value,width:this.width.value,height:this.height.value}); 
    } 

} 

NumberValidators.module.ts

import { AbstractControl, ValidatorFn } from '@angular/forms'; 

export class NumberValidators { 

    static range(min: number, max: number): ValidatorFn { 
     console.log(min+max); 
     return (c: AbstractControl): { [key: string]: boolean } | null => { 
      if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) { 
       return { 'range': true }; 
      } 
      return null; 
     }; 
    } 

}

ですが、それが正常に動作していません誰にでも何か提案がありますか？

Answer 1

あなた自身の数値バリデーターを書くことができます。このようなもの：

import { AbstractControl, ValidatorFn } from '@angular/forms'; 

export class NumberValidators { 

    static range(min: number, max: number): ValidatorFn { 
     return (c: AbstractControl): { [key: string]: boolean } | null => { 
      if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) { 
       return { 'range': true }; 
      } 
      return null; 
     }; 
    } 
} 

Answer 2

私が見つけた最も簡単な方法はバリデーターです。この参照リンクをチェックしてください：

https://angular.io/api/forms/Validators私が実装した完全なコード例は以下の通りである

static min(min: number): ValidatorFn 
static max(max: number): ValidatorFn 

：参照component.tsについては

this.form = this.fb.group({ 
    'name' :new FormControl(null, Validators.compose([Validators.required])), 
    'width': new FormControl(null, Validators.compose([Validators.required, Validators.min(0), Validators.max(200)])), 
    'height': new FormControl(null, Validators.compose([Validators.required, Validators.min(0), Validators.max(200)])) 
}); 

component.html

<div *ngIf="width.errors?.min || width.errors?.max" class="error">Width is not valid.</div> 
<div *ngIf="height.errors?.min || height.errors?.max" class="error">Height is not valid.</div>