web-dev-qa-db-fra.com

Comment exiger conditionnellement des entrées de formulaire dans angular 4?

J'utilise des formulaires basés sur des modèles pour ajouter la tâche, et il y a 2 champs de saisie de type nombre pour les minutes estimées pour terminer la tâche,

  • un champ est pour le nombre estimé d'heures et
  • un autre est pour les minutes estimées pour terminer la tâche

puisque l'estimation de la tâche peut être effectuée en heures comme 1hrs, ou en heures et minutes comme 1Hrs 30Mins, donc je veux définir l'attribut obligatoire aux entrées conditionnellement. Ainsi, l'une des 2 entrées doit être définie ou une erreur de validation de formulaire se produira si les deux entrées sont vides lors de la soumission du formulaire.

jusqu'à présent, je l'ai fait, mais la validation ne fonctionne pas

<form class="add-task" (ngSubmit)="onSubmit(newtask)" #newtask="ngForm">  
    <div class="estimate-container">
        <input 
            type="number" 
            min="0" 
            max="10" 
            id="estimate_hrs" 
            ngModel 
            name="estimate_hrs"
            mdInput 
            [required]="!estimateMins.valid" 
            placeholder="Estimated Hours" 
            #estimateHrs="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateHrs.valid && !estimateMins.valid">
            Please enter estimated hours 
        </div>
        <input 
            type="number" 
            min="0" 
            max="60" 
            id="estimate_min" 
            ngModel 
            name="estimate_min" 
            mdInput 
            [required]="!estimateHrs.valid" 
            placeholder="Estimated Minutes" 
            #estimateMins="ngModel"
        >
        <div class="error-msg" *ngIf="!estimateMins.valid && !estimateHrs.valid">
            Please enter estimated minutes
        </div>   
    </div>
    <button type='submit' [disabled]="!newtask.valid" >Submit</button>
</form>
formsangularvalidation
14
R.K

Essayez plutôt d'utiliser [attr.required].

   <input 
        type="number" 
        min="0" 
        max="10" 
        id="estimate_hrs" 
        ngModel 
        name="estimate_hrs"
        mdInput 
        [attr.required]="!estimateMins.valid" 
        placeholder="Estimated Hours" 
        #estimateHrs="ngModel"
    >
11
DeborahK

Vous devez mettre votre !estimateMins.valid entre guillemets simples comme:

[required]="'!estimateMins.valid'" et [required]="'!estimateHrs.valid'"

Voir ceci plunkr

6
penleychan

Ceci est ma solution de travail pour Angular 5:

Dans le composant:

@Input()
required: boolean;

Dans le modèle sur l'élément d'entrée (ou de sélection) qui:

[required]="required"

Sur le sélecteur:

[required]="true"

Comme @DeborahK revérifié, pas besoin de guillemets simples :-)

5
Pim Hazebroek

J'ai passé un certain temps à essayer cela car la syntaxe de base aurait dû fonctionner. J'ai d'abord fait un simple plunker juste pour tester la syntaxe et la syntaxe fonctionne en effet comme définie.

Après avoir étendu le plongeur pour qu'il corresponde mieux au code OP: https://plnkr.co/edit/QAqeBYrg19dXcqbubVZ8?p=preview

<Links to plunker must be accompanied by code>

Il est devenu évident que ce n'est pas une erreur de syntaxe. Il s'agit plutôt d'une erreur logique.

Lorsque le formulaire apparaît pour la première fois, les deux contrôles sont valides, donc aucun d'eux n'a l'attribut requis. Donc, ni l'un ni l'autre n'est requis et il semble que cela ne fonctionne pas.

Il existe plusieurs façons de résoudre ce problème. L'une consiste à créer un validateur personnalisé qui effectue la validation entre champs.

2
DeborahK