Dev Faq
0
votes

Sélectionnez l'option avec la valeur par défaut non définie avec l'attribut requis ne fonctionne pas mais la valeur vide

J'ai une liste déroulante des pays xxx

pour "sélectionner le pays", il est nécessaire de définir [valeur] = "non défini" sinon il ne serait pas affiché comme sélection par défaut au lieu de la sélection vide.

Même si le champ marqué est le cas échéant, sous forme de formulaire requis ne sera pas montré comme pour xxx

qui est un comportement par défaut dans HTML 5:

Entrez la description de l'image ici

comme un travail autour de la validation de la poignée sur le formulaire Soumettre, mais cette fois, les champs obligatoires seront validés, mais enfin champ de pays. xxx

Quelle pourrait être une solution au champ [valeur] = "non définie" et montrer "Veuillez sélectionner un élément d'abord" alerte? Voir le Forked Fiddle de Daniel's

6 commentaires

Je ne comprends pas ce que vous voulez dire avec la partie pourquoi il serait nécessaire de définir la valeur sur non défini ?

Cela signifie que si vous souhaitez montrer l'option par défaut dans Sélectionner un élément, les options doivent avoir une valeur "non définie"

Parlez-vous de toute exigence spécifique introduite par angulaire? Parce qu'en HTML lui-même, il n'y a pas de telle exigence.

Désolé pour la confusion, essayez de clarifier avec le titre de la question mise à jour

Vous devriez vraiment laisser angular gérer la validation pour vous. Dans ma réponse proposée, votre contrôle de formulaire SELECT sera invalide et vous pouvez afficher un message d'erreur aussi longtemps que cela reste invalide. Et rappelez-vous, null! == non défini . NULL est une valeur, non défini n'est pas.

Je ne vois pas comment cela clarifie, cela indique simplement ce que nous savions déjà - la valeur doit être la chaîne vide, car cela fonctionne comme défini par la spécification HTML5. Pourquoi vous insistez sur la définition non définie car la valeur est ce que je voulais savoir.

3 Réponses :

1
votes

Pour définir une valeur d'espace réservé de votre sélection, définissez l'état du modèle sur null code> et ajoutez une option avec un null code> valeur. L'état requis invalidera null code> en option, qui définira le formulaire à invalide et le contrôle spécifique à invalider. Vous pouvez gérer le message de validation de quelque manière que vous souhaitiez.

avec des formes réactives forte> p>

dans votre modèle p> 

countryTemplateForm = null;
countries = [
  { name: 'USA'},
  { name: 'India' },
  { name: 'France' }
];

2 commentaires

Je pense qu'il y a un malentendu, le problème est «d'alerte requis» Soumettre, dans votre violon, il n'existe pas de formulaire Soumettre. Voir

J'ai mis à jour la Stackblitz pour correspondre à vos exigences!

0
votes

Réglage Choisissez la valeur de l'état pour vider la chaîne

ou P> 

 <form ngNativeValidate>
   <select [(ngModel)]="myDropDown"  (ngModelChange)="onChangeofOptions($event)" 
    required [ngModelOptions]="{standalone: true}">
     <option value="">Choose a state</option>
     <option *ngFor="let option of items;"[value]="option.id">{{option.name}}</option>
   </select>
   <input [hidden]="myDropDown !=='two'"type="text">
   <input type="submit" value="submit form">
  </form>

2 commentaires

Si vous souhaitez utiliser l'option par défaut, sélectionnez à partir de la liste ou définissez explicitement l'option par défaut

3
votes

J'ai également eu le même problème à utiliser après avoir résolu le problème pour moi xxx

1 commentaires

Utilisation de non défini comme NGValue pour option est une approche correcte pour sélectionner l'option par défaut lors de l'initialisation Sélectionnez avec un objet vide . Merci.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail