Angulaire 6 valider la saisie du numéro de

J'ai une entrée et le type de numéro. Je tiens à mettre en min et max, si l'entrée est en dehors de cette plage (< min >max), l'erreur sera affiché.

Mon problème est que si l'entrée n'est pas vide, mais non valide, le message d'erreur disparaît (exemple: min =10, max =20, entrée =2000, pas encore de message d'erreur apparaît).

Je recherche sur ce site et il y a un post sur la validation, mais la solution est d'utiliser < md-entrée container-> et < md-erreur>. Je ne veux pas utiliser < md-entrée container-> et < md-erreur>.

Référence:ici

Est de toute façon il résoudre mon problème?

Mon add-hero.component.html:

<div class="publishedYear">
<label>Publish Year: </label>
<input type="number" id="PublishedYear" name="PublishedYear" required min="10" max="20" 
[(ngModel)]="hero.PublishedYear" #publishedYear="ngModel">
<p class="alert alert-danger invalid" *ngIf="publishedYear.errors">Invalid Published Year</p>
</div>

Mon Héros.ts

export class Hero {
Id: number;
Name: string;
PublishedYear: number;
Complete?: boolean;
}

cela a probablement pas grand-chose à voir avec le modèle d'ailleurs avec votre constructeur et votre composant la structure pourrait montrer plus de code?
rien dans mon constructeur, j'ai ajouté mon Héros.ts à la question.
Soit, vous devriez avoir ng-forme dans votre code html, et d'utiliser <mat-forme-champ> pour l'entrée ou écrire une méthode pour valider l'entrée d'un composant, lorsque l'utilisateur se fait de donner de la valeur d'entrée et la mise à jour de la variable utilisée dans *ngIf condition.
vous pouvez poster une réponse au sujet d'avoir ng-forme en html? Je n'utilise pas de ng-forme, mais un simple < div>. Je vous remercie à l'avance.

InformationsquelleAutor anhtv13 | 2018-10-24

angular angular6

6

À vos solutions lorsque vous utilisez l'entrée type="number" paramètre min et max ne s'arrêtera que pour permettre à l'utilisateur quand il s'incrémenter ou décrémenter le numéro à l'aide de la molette. mais lorsque l'utilisateur va taper directement le numéro dans le texte, il n'affichera aucune erreur

à faire qu'il y a 2 solutions

1) Ajouter un formulaire de contrôle de votre entrée à l'aide angulaire de la validation du formulaire, il y aura un couple d'exemples en ligne

2) Appeler une fonction sur la modification d'une zone de texte ou cliquez sur le bouton pour valider le nombre entré par l'utilisateur correspond à votre expression en fichier ts.

à l'aide de la validation du formulaire que vous devez faire
```
myForm = new FormGroup({}) //Instantiating our form

constructor(private fb: FormBuilder){ //Injecting the ReactiveForms FormBuilder.
  this.myForm = fb.group({
    //Adding the "myNum" input to our FormGroup along with its min-max Validators.
    'myNum': ['', [Validators.min(5), Validators.max(10)]] 
  })
}
```
et en HTML
```
<form [formGroup]="myForm"> 
    <label for="myNum">Some Val</label>
    
    <input type='number' id="myNum" formControlName="myNum">
    <div *ngIf="myForm.controls['myNum'].hasError('max')">
          Minimum required number is 15.
    </div> 
</form>
```
- laissez-moi essayer, je vais vous raconter la suite bientôt. Je vous remercie à l'avance.
- qu'est-ce que num1 dans la ligne "< div *ngIf="num1.les erreurs">?
- son un message d'erreur vérifier si la condition n'est pas remplie, il va afficher le message d'erreur
- J'ai une erreur: "ERREUR TypeError: Cannot read property 'erreurs' undefined". Donc "num1" n'est pas défini, alors il ne peut pas obtenir les "erreurs" d'objet non défini.
- toujours la même erreur 🙁 je ne sais pas pourquoi, êtes-vous sûr que vous n'obtenez pas d'erreur?
- merci, j'ai finalement résolu le problème. Je vous remercie pour vos efforts, votre solution est très appréciée.
- que sais heureux de codage frère!
InformationsquelleAutor Hrishikesh Kale

Voir l'exemple de code dans stackblitz

import { Component } from '@angular/core';

import { Directive, Input, forwardRef } from "@angular/core";
import {
    Validator, AbstractControl, NG_VALIDATORS, Validators, ValidatorFn
    } from "@angular/forms";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  hero: any = {};
}


@Directive({
    selector: "[min][formControlName],[min][formControl],[min][ngModel]",
    providers: [
        { provide: NG_VALIDATORS,
            useExisting: forwardRef(() => MinDirective),
            multi: true }
    ]
})
export class MinDirective implements Validator {
    private _validator: ValidatorFn;
    @Input() public set min(value: string) {
        this._validator = Validators.min(parseInt(value, 10));
    }

    public validate(control: AbstractControl): { [key: string]: any } {
        return this._validator(control);
    }
}

@Directive({
    selector: "[max][formControlName],[max][formControl],[max][ngModel]",
    providers: [
        { provide: NG_VALIDATORS,
            useExisting: forwardRef(() => MaxDirective),
            multi: true }
    ]
})
export class MaxDirective implements Validator {
    private _validator: ValidatorFn;
    @Input() public set max(value: string) {
        this._validator = Validators.max(parseInt(value, 10));
    }

    public validate(control: AbstractControl): { [key: string]: any } {
        return this._validator(control);
    }
}

<input type="number" [(ngModel)]="hero.count" name="count" #count="ngModel" required min="1" max="100">

<p *ngIf="count.invalid">Invalid Published Year</p>

Ajouter la directive de déclarations. Cela devrait fonctionner pour le modèle de moteur, les formes

votre solution fonctionne, mais j'ai trouvé une autre façon de résoudre le problème. Btw, ta solution est très appréciée, merci pour votre effort.

InformationsquelleAutor Tibin Thomas

Merci pour toutes vos réponses ci-dessus et de vos efforts.
Après quelques heures de recherche, j'ai enfin eu une réponse de : page

Si vous avez un problème comme moi, voici la réponse.

Mon .fichier html:

<form [formGroup]="myForm">
<label for="publishedYear">Publish Year: </label>
<input type="number" id="PublishedYear" formControlName="publishedYear">
<div *ngIf="f.publishedYear.errors">
  Invalid Published Year
</div>

Mon .ts fichier:

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../Hero';
import { HeroService } from '../hero.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from 
'@angular/forms';

@Component({
selector: 'app-hero-add',
templateUrl: './hero-add.component.html',
styleUrls: ['./hero-add.component.css']
})
export class HeroAddComponent implements OnInit {

hero: Hero = new Hero();

myForm = new FormGroup({}) //Instantiating our form

get f() { return this.myForm.controls; }

constructor(private heroService: HeroService, private router: Router, private 
formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({     
    publishedYear: ['', [Validators.min(1990), Validators.max(2018)]]
});
}

  ngOnInit() {
  }     
}

Comment vous gérez ces erreur lorsque l'utilisateur entre une valeur comme 2019?
la div contenant non Valide "Publié l'Année" s'affiche.

InformationsquelleAutor anhtv13

Vous devez vous connecter pour publier un commentaire.