title: Validators min and maximum number angular 4
body: <p>is there any option to make validator min and maximum number, i.e number between 0 to 200?</p>
  
  <p>dialog-result-component.ts</p>
  
  <pre><code>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&lt;DialogResultComponent&gt;,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});
    }
  }
  </code></pre>
  
  <p>dialog-result.component.html</p>
  
  <pre><code>       &lt;form [formGroup]="form"&gt;
       &lt;h3&gt;MineSweeperwix&lt;/h3&gt;
        &lt;div class="mdl-dialog__content"&gt;
                  &lt;p&gt;&lt;mdl-textfield type="text" label="name" formControlName="name" floating-label autofocus&gt;&lt;/mdl-textfield&gt;&lt;/p&gt;
                  &lt;mdl-textfield type="number" formControlName="width" min="0" max="350" label="width"   floating-label autofocus&gt;&lt;/mdl-textfield&gt;
                 &lt;mdl-textfield type="number" formControlName="height" label="height" min="0" max="350" floating-label autofocus  error-msg="'Please provide a correct email!'"&gt;&lt;/mdl-textfield&gt;
        &lt;/div&gt;
        &lt;div class="mdl-dialog__actions"&gt;
          &lt;button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple [disabled]="!form.valid"&gt;Save&lt;/button&gt;
          &lt;button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
     &lt;/form&gt;
  </code></pre>
  
  <p>the min and maximum into the the mdl-text-field</p>
  
  <pre><code>min="0" max="200" floating-label autofocus
  </code></pre>
  
  <p>limit the user to write number between the range but it let to press the save button and that's not what i want to do. i want the user can press save button just if all the form is valid.</p>
  
  <p>what I tried to do is</p>
  
  <p>dialog.result.component.ts</p>
  
  <pre><code>    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&lt;DialogResultComponent&gt;,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});
    }
  
  }
  </code></pre>
  
  <p>NumberValidators.module.ts</p>
  
  <pre><code>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 =&gt; {
              if (c.value &amp;&amp; (isNaN(c.value) || c.value &lt; min || c.value &gt; max)) {
                  return { 'range': true };
              }
              return null;
          };
      }
  </code></pre>
  
  <p>}</p>
  
  <p>but it's not works fine, anyone have any suggestion?</p>