验证器最小和最大数字角度4

是否有任何选项可以使验证器的最小和最大数量，即0到200之间的数字？验证器最小和最大数字角度4

对话框的结果-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; 
     }; 
    }

}

，但它不是工作正常任何人有任何建议？

来源

2017-05-05 Adir Zoari

你可以编写自己的数字验证器。这样的事情：

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; 
     }; 
    } 
}

来源

2017-05-05 15:39:42 DeborahK

黛博拉，我带着这个验证器并尝试使用它。它显示我一个错误。我用它像那样width = new FormControl（''，Validators.required，NumberValidators.range（3,300））; –

它显示“类型ValidatorFn的参数”不能分配给类型为'asynceValidatorFn ..... –

的参数第二个参数用于正常验证器，第三个参数用于异步验证器。这不是一个异步验证器。您需要通过将第二个参数作为数组传递来将其添加为第二个参数的一部分。像这样：[validators.required，NumberValidators.range（3,300）] – DeborahK

我发现最简单的方法是验证器。检查这个参考链接：

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>

来源

2017-12-08 09:20:17

验证器最小和最大数字角度4

回答

相关问题