Validatoren min. Und maximale Anzahl winkelig 4

Question

Gibt es eine Option, um die Mindest- und Höchstzahl des Validators festzulegen, d. H. Die Zahl zwischen 0 und 200?

dialog-Ergebnis-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> 

die min und maximal in die MDL-text-Feld

min="0" max="200" floating-label autofocus 

schränken Sie den Benutzer ein, Nummer zwischen dem Bereich zu schreiben, aber es lassen Sie den Speicherknopf drücken, und das ist nicht was ich will machen. Ich möchte, dass der Benutzer die Schaltfläche "Speichern" nur drücken kann, wenn das Formular gültig ist.

, was ich zu tun versucht, ist

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

}

aber es funktioniert nicht in Ordnung Hat jemand einen Vorschlag?

Answer 1

Sie könnten Ihren eigenen numerischen Validator schreiben. So etwas wie das:

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

Der einfachste Weg, den ich gefunden habe, ist mit Validatoren. Prüfen Sie diesen Referenz Link:

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

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

komplette Codebeispiel, die ich umgesetzt haben, ist wie folgt:

Für die Referenz 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>