Javascript Girl
  1. Javascript Girl
  3. Groupe de boutons radio AngularJS avec "autre" option qui comprend un champ de texte
Intereting Posts
Comment puis-je ajouter plusieurs éditeurs TinyMCE avec différentes configurations pour chacun d'eux? Javascript pour l'ajout d'URL conditionnelle ou la redirection basée sur window.location.href Comment puis-je diviser une chaîne longue en deux au neuvième espace? ES6 Iterate sur les méthodes de classe Comment récupérer le numéro de série de Android Mobile Browser à l'aide de Java Scripting, qui sera de la source d'application Web en cours d'exécution dans le navigateur mobile Code de méthode de triage natif Javascript Comment faire pour que array.forEach (asyncfn) soit synchronisé? Ajout de fichiers javascript externes sur node.js Recherchez la coordonnée y pour la position du curseur dans div in UIWebView Fonction flèche ECMAScript6 qui renvoie un objet Instanciation dynamique en JavaScript Jquery ajax fonctionne pour appeler le script php qui renvoie une valeur? Est-il possible d'utiliser plusieurs images dans un canevas HTML5? Comment éviter de recharger avec onclick sans "#"? JQuery offset () ne fonctionne pas dans certains navigateurs, sur certains ordinateurs

Groupe de boutons radio AngularJS avec "autre" option qui comprend un champ de texte

J'ai un formulaire avec trois boutons radio dans un groupe. Le troisième bouton radio est "Autre" et a un champ de texte dans lequel l'utilisateur peut entrer quelque chose. Je peux faire le bouton radio requis en ajoutant la propriété "requise" à l'élément de saisie du bouton radio. Cependant, j'aimerais que le champ de texte soit requis si et seulement si le bouton radio "Autre" est sélectionné. Comment puis-je accomplir cela? 

<p> Program: <label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label> <label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label> <label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label> <input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" /> </p>

L'autre chose que j'aimerais faire est de s'assurer en quelque sorte que si "autre" n'est pas sélectionné, alors $ scope.form.OtherProgram est vierge, tout en laissant le texte sur l'écran afin que, s'il est resélectionné, l'utilisateur ne Il faut que je retape ce qui se trouvait dans le champ de texte.

Vous pouvez utiliser ng-required. Quelque chose comme 

 <input type ="text" ng-required ="form.Program != 'other'">

devrait marcher.

En ce qui concerne votre autre problème, vous devez utiliser une logique de contrôleur et une sorte de variable temporaire pour form.OtherProgram , en utilisant $ watch par exemple. 

 $scope.$watch('form.Program', function(mVal){ if (angular.isUndefined($scope.form)) return; if(mVal === 'other'){ $scope.form.OtherProgram = $scope.tmVar; } else { if($scope.form.OtherProgram !== null){ $scope.tmVar = $scope.form.OtherProgram; $scope.form.OtherProgram = null; } } });

Plunker: http://plnkr.co/edit/npvUXpRhB5MYJOstwd88?p=preview

Voici ce que j'ai fini. C'est une légère variation sur la réponse d'hugo. La principale différence est que le "autre" texte reste visible sur l'écran. Je pensais juste que je documentais ceci comme une approche alternative. 

 <p> Program: <label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label> <label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label> <label><input type="radio" ng-model="form.Program" name="Program" value="Other" required /> Other</label> <input type="text" ng-model="OtherProgram" ng-disabled="form.Program != 'Other'" ng-change="form.OtherProgram = OtherProgram" ng-required="form.Program == 'Other'" name="Program_Other" /> <input type="hidden" ng-model="form.OtherProgram" /> </p>

Et puis cette fonction $ watch dans mon contrôleur: 

 $scope.$watch('form.Program', function (mVal) { if (angular.isUndefined($scope.form)) return; if (mVal === 'Other') { $scope.form.OtherProgram = $scope.OtherProgram; } else { $scope.form.OtherProgram = null; } });