验证器的最小和最大数量 angular 4答案

【问题标题】：Validators min and maximum number angular 4验证器的最小和最大数量 angular 4
【发布时间】：2017-05-05 15:33:06
【问题描述】：

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

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

       <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 中的最小值和最大值

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

}

但效果不好，有人有什么建议吗？

【问题讨论】：

标签： forms angular validation

【解决方案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;
        };
    }
}

【讨论】：

嘿黛博拉，我拿了这个验证器并尝试使用它。它向我显示了一个错误。我像这样使用它 width = new FormControl('',Validators.required,NumberValidators.range(3,300));
它显示“ValidatorFn 类型的参数”不能分配给 'asynceValidatorFn 类型的参数.....
第二个参数用于普通验证器，第三个参数用于异步验证器。这不是异步验证器。您需要通过将第二个参数作为数组传递来将其添加为第二个参数的一部分。像这样：[validators.required, NumberValidators.range(3,300)]

【解决方案2】：

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

https://angular.io/api/forms/Validators

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

我实现的完整代码示例如下：

供参考组件.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>

【讨论】：