Radio buttons inside directive in a ng-repeat not working in AngularJS

Question

I have a set of radio buttons inside a directive. The directive has an ng-repeat, so it exists multiple times.

I'm able to populate the input fields of the directive, but the radio buttons won't react.

angular.module('account-form-client-de', [])
  .controller('ctrl', function($scope) {
    $scope.owners = [];
    $scope.addOwner = function() {
      $scope.owners.push({
        class: 'person',
        name: 'new owner',
        percentage: 0
      });
    }

    $scope.addOwner();
    $scope.addOwner();
  })
  .directive("newOwner", function() {
    var options = {
      restrict: 'E',
      replace: true,
      scope: {
        owner: '=',
        remove: '&'
      },
      link: function(scope, element, attrs, controller, $parent) {

      },
      template: `
      <div class="table-owners item-row">
        <div class="checkbox">
            <input type="radio" name="type" ng-model="owner.class" value="person" validate-on-change>
            <label for="person" translate>
                table_owners.person
            </label>
        </div>
        <div class="checkbox">
            <input type="radio" name="type" ng-model="owner.class" value="company" validate-on-change>
            <label for="company" translate>
                table_owners.company
            </label>
        </div>
        <input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
        <input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
      </div>`
    };

    return options;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
  <pre>{{owners}}</pre>
  <new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>

  <button ng-click="addOwner()">add owner</button>
</div>

Since both the inputs and radio buttons refer to a property in the owner object, I fail to see why the inputs bind, and the radio buttons won't even become checked.

Any ideas?

Ruben Helsloot · Answer 1 · 2020-10-12T12:25:50.200

It's because when you have the same directive multiple times, you have the same radio buttons with the same values multiple times. Then, the HTML parser gets confused. I fixed it by wrapping each row in a <form> (which you don't have to submit), so it's valid again.

angular.module('account-form-client-de', [])
  .controller('ctrl', function($scope) {
    $scope.owners = [];
    $scope.addOwner = function() {
      $scope.owners.push({
        class: 'person',
        name: 'new owner',
        percentage: 0
      });
    }

    // Add two owners to begin with
    $scope.addOwner();
    $scope.addOwner();
  })
  .directive("newOwner", function() {
    var options = {
      restrict: 'E',
      replace: true,
      scope: {
        owner: '=',
        remove: '&'
      },
      link: function(scope, element, attrs, controller, $parent) {

      },
      template: `
      <form class="table-owners item-row">
        <div class="checkbox">
          {{owner.class}}
          <input type="radio" name="person" value="person" ng-model="owner.class">
          <label for="person" translate>
              table_owners.person
          </label>
        </div>
        <div class="checkbox">
          <input type="radio" name="company" value="company" ng-model="owner.class">
          <label for="company" translate>
              table_owners.company
          </label>
        </div>
        <input name="owners_name" ng-model="owner.name" type="text" placeholder="" class="form-control input-md">
        <input name="owners_percentage" ng-model="owner.percentage" type="number" placeholder="" class="form-control input-md">
      </form>`
    };

    return options;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="account-form-client-de" ng-controller="ctrl">
  <pre>{{owners}}</pre>
  <new-owner ng-repeat="owner in owners track by $index" owner="owner"></new-owner>

  <button ng-click="addOwner()">add owner</button>
</div>

If u add more rows in your example, radio buttons seem to get lost also! — Eric Mitjans, Oct 12 '20 at 12:13
Unfortunately this is part of a larger form with its own validation process, so I can't really add a form wrapper for the directive. — Eric Mitjans, Oct 12 '20 at 12:40
In that case, use a `fieldset` instead. See also [this answer](https://stackoverflow.com/a/28543929/5015356) — Ruben Helsloot, Oct 12 '20 at 12:40

Radio buttons inside directive in a ng-repeat not working in AngularJS

1 Answers1