验证器的最小和最大数量角4 [英] Validators min and maximum number angular 4
问题描述
是否可以选择验证器的最小和最大数字,即0到200之间的数字?
is there any option to make validator min and maximum number, i.e number between 0 to 200?
dialog-result-component.ts
dialog-result-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});
}
}
dialog-result.component.html
dialog-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-text-field
the min and maximum into the the mdl-text-field
min="0" max="200" floating-label autofocus
限制用户在范围之间写入数字,但是可以按下保存按钮,这不是我想要的.我希望用户可以在所有表格均有效的情况下按保存按钮.
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.
我想做的是
dialog.result.component.ts
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
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;
};
}
}
但是它不能正常工作,有人有什么建议吗?
but it's not works fine, anyone have any suggestion?
推荐答案
您可以编写自己的数字验证器.像这样:
You could write your own numeric validator. Something like this:
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;
};
}
}
这篇关于验证器的最小和最大数量角4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!