驗證器最小和最大數字角度4

Question

是否有任何選項可以使驗證器的最小和最大數量，即0到200之間的數字？

對話框的結果-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>