ng-model, don't show data in view

1
votes

I have a case where I use a form with AngularJS. I have radio buttons and the last option is always text input. All of them are connected with the same model so what ever user chooses with radio buttons or type in text input is saved in model.

The problem is with text input. When a user clicks the radio button, its value is shown on the last text input line. How do I stop that and still keep it connected to the same ng-model?

<label class="form-check-label">
  <input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>

<label class="form-check-label">
  <input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
 ...

<div class="mtl-20">
  Please write in: <input class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.religion" >
</div>
2
angularjsformsangularjs-ng-model
why do you want to keep it connected to ng-model? - Gaurav Srivastava
it's older project and backend is already done. I need to POST the same type of object. - Igor-Vuk
Can't you keep radio's value in another model and assign it to input? - user8317956
Hi slacker. Sorry, I don't know what you have in mind. I am React person but was thrown in Angular last week :) - Igor-Vuk

2 Answers

0
votes

You can try a different approach like this:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.$ctrl = {};
 $scope.$ctrl.diversityTest = {};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
<label class="form-check-label">
  <input class="form-check-input" type="radio" name="religion" value="sikhizm" ng-model="$ctrl.diversityTest.religion">Sikhizm
</label>

<label class="form-check-label">
  <input class="form-check-input" type="radio" name="religion" value="catholic" ng-model="$ctrl.diversityTest.religion">Catholic
</label>
 ...

<div class="mtl-20">
  Please write in: <input ng-keyup="$ctrl.diversityTest.religion = $ctrl.diversityTest.temp" class="input-material" type="text" name="religion" ng-model="$ctrl.diversityTest.temp" >
</div>

<br>
This is religion model value : {{$ctrl.diversityTest.religion}}
</div>
0
votes

How about this for a solution? Basically, have the radio buttons. Create an 'Other' with a text box, and only allow it to be selected if you enter a value for other. The text model is different, but when it's filled, will allow you to select 'Other' which will take on the value of what is in the textbox, and pass it to the model you care about.

  <label class="form-check-label">
    <input class="form-check-input" type="radio" name="religion" value="{{ textValue }}"
    ng-disabled="!textValue && !(textValue.length > 5)"
    ng-model="diversityTest.religion">

    Other

    <input class="input-material" type="text" name="religion" ng-model="textValue">
  </label>

http://plnkr.co/edit/f9lzNLhZuy0c7BI2kE2A?p=preview