Как изменить состояние вложенной формы формы на чтение только нажатием кнопки

Question

Моя проблема довольно прямолинейна.

Вещи, которые у меня есть.

- Форма (формально), которую я сделал с использованием данных (JSON), полученных от бэкэнда.

- Форма будет многоуровневой вложенной (в настоящее время ее два уровня вложены).

- Существует повторитель, связанный с каждым элементом вложенной формы, который будет добавлять другой элемент в форму при нажатии кнопки.

- В верхней части страницы будет кнопка, которая будет переключать состояние элементов формы на чтение только.

Проблема, что я столкнулся

- Когда я нажимаю кнопку, состояние элементов формы изменится на ReadOnly, за исключением тех, которые вложены.

То, что я хочу

--Когда я нажимаю кнопку, каждый элемент моей формы должен изменить свое состояние на ReadOnly, вложенный или нет.

Здесь находится контроллер ... Последовала ссылка JS-Bin.

app.controller('MainCtrl', function MainCtrl(formlyVersion) { 
 
    var vm = this; 
 

 
    vm.onSubmit = onSubmit; 
 
    vm.exampleTitle = 'Nested Repeating Section'; 
 
    vm.options = { 
 
    formState: { 
 
     readOnly: true 
 
    } 
 
    }; 
 

 
    init(); 
 

 
    vm.originalFields = angular.copy(vm.fields); 
 

 

 
    function onSubmit() { 
 
    alert(JSON.stringify(vm.model), null, 2); 
 
    } 
 

 

 
    function init() { 
 
    vm.fields = [{ 
 
     key: 'name', 
 
     type: 'input', 
 

 
     templateOptions: { 
 
     label: 'Name', 
 
     required: true, 
 
     minlength: 5, 
 
     maxlength: 25 
 
     } 
 
    }, { 
 
     key: 'description', 
 
     type: 'textarea', 
 

 
     templateOptions: { 
 
     label: 'Description', 
 
     rows: 5, 
 
     maxlength: 100 
 
     } 
 
    }, { 
 
     wrapper: 'panel', 
 
     templateOptions: { 
 
     label: 'Cars' 
 
     }, 
 
     fieldGroup: [{ 
 
     type: 'repeatSection', 
 
     key: 'cars', 
 
     templateOptions: { 
 
      btnText: '+', 
 
      fields: [{ 
 

 
      wrapper: 'panel', 
 
      templateOptions: { 
 
       label: 'New car' 
 
      }, 
 
      fieldGroup: [{ 
 
       key: 'carname', 
 
       type: 'input', 
 
       templateOptions: { 
 
       label: 'Name', 
 
       required: true, 
 
       maxlength: 25 
 
       } 
 
      }, { 
 
       key: 'cardesc', 
 
       type: 'input', 
 
       templateOptions: { 
 
       label: 'Description', 
 
       maxlength: 50 
 
       } 
 
      }] 
 
      }] 
 
     } 
 
     }] 
 
    }]; 
 
    } 
 
});

http://jsbin.com/sunocaf/edit?html,js,output

Заранее спасибо

P.S. - Я привел пример с официального угловатого официального сайта.

Answer 1

Я способный найти работу по моей проблеме. Я все еще контролирую функцию отключения с помощью кнопки, единственное отличие состоит в том, что я использую отдельный контроллер для повторного раздела моей формы.

Таким образом, я могу предоставить флаг с использованием службы передачи данных контроллеру повторной секции, чтобы отключить его вместе со всей формой.

Для этого мне пришлось немного обернуть оболочку повторного сечения, но конечный результат был именно тем, что я хотел.

Cheers.

Answer 2

Это приведет только к вводу только входов и не будет влиять на переключатели или флажки. Кнопки тоже в этом отношении.

Чтобы сделать то, что вы хотите, установите нг щелкните событие в кнопке:

ng-click="readOnly()" 

затем в контроллере:

$scope.readOnly = function() { 
     $(document).ready(function() { 
      $('input').click(function (e) { 
       e.preventDefault(); 
      }); 
     }); 
    }; 

Это предотвратит вход возникновения. Если вам нужно скрыть/отключить кнопки, вы можете установить флаг readOnly в true и иметь ng-show или ng-disabled на кнопке, установленной на! Model.readOnly.

Если вы хотите сделать вид, вы используете угловым вместо JQuery, хотя angular.element является ALIAS для JQuery (прямо из угловых Документов), то вы можете сделать:

$scope.readOnly = function() { 
    angular.element(function() { 
      angular.element('input').trigger('click')(function(e) { 
       e.preventDefault(); 
      }; 
     }); 
};