带有“其他”项的AngularJS单选按钮组选项包含一个文本字段 [英] AngularJS radio button group with "other" option that includes a text field

问题描述

我有一个组中有三个单选按钮的表单。第三个单选按钮是其他，并有一个文本字段，用户可以在其中输入内容。通过向单选按钮的输入元素添加required属性，我可以创建所需的单选按钮。但是，如果且仅当选中其他单选按钮时，才会使文本字段成为必需。我怎样才能做到这一点？

$ b

 < p> 
程序：
< label>< input type =radiong-model =form.Programname =Programvalue =option 1required />选项1< / label> 
< label>< input type =radiong-model =form.Programname =Programvalue =option 2required />选项2< / label> 
< label>< input type =radiong-model =form.Programname =Programvalue =otherrequired />其他< /标签> 
< input type =textng-model =form.OtherProgramng-disabled =form.Program！='other'name =Program_Other/> 
< / p> 
  

我想要做的另一件事是确保如果其他是没有被选中，那么$ scope.form.OtherProgram是空白的，同时在屏幕上留下文本，这样如果它被重新选择，那么用户不必重新键入文本字段中的内容。

解决方案

您可以使用ng-required。就像

 < input type =textng-required =form.Program！='other'> 
  

应该有效。

关于您的其他问题，您必须为 form使用一些控制器逻辑和某种临时变量.OtherProgram ，使用$ watch作为例子。

$ $ $ $ $ $ $ $ $ $ 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

I have a form with three radio buttons in a group. The third radio button is "Other" and has a text field where the user can enter something in. I can make the radio button required by adding the "required" property to the radio button's input element. However, I'd like to make the text field required if and only if the "Other" radio button is selected. How can I accomplish this?

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

The other thing that I'd like to do is to somehow make sure that if "other" is not selected, then $scope.form.OtherProgram is blank, while leaving the text on the screen so that if it's reselected then the user doesn't have to retype what was in the text field.

解决方案

You can use ng-required. Something like

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

should work.

Regarding your other issue, you have to employ some controller-logic and some kind of temporary variable for form.OtherProgram, using $watch for example.

$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

这篇关于带有“其他”项的AngularJS单选按钮组选项包含一个文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！