如何將嵌套的formly表單狀態更改爲只讀按鈕

我擁有的東西。

- 我使用從後端接收到的數據（JSON）創建的表單（形式）。

- 表單將是Multilevel Nested（目前它的兩級嵌套）。

- 有一箇中繼器與每個嵌套的表單元素相關聯，只需單擊一個按鈕即可向表單添加另一個元素。

- 頁面頂部會出現一個按鈕，將表單元素的狀態切換爲只讀。我現在面臨

問題 - 當我點擊該按鈕時，表單元素的狀態改變爲只讀的，除了嵌套的那些。

我想

- 當我按一下按鈕，我的形式每一個元素應該改變其狀態爲只讀的，嵌套的或沒有什麼。

這是控制器...後面跟着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

在此先感謝

附： - 我從官方的有棱角的formly網站上看到了這個例子。

來源

2017-02-05 Sunny Choudhary

我能夠找到解決我的問題的工作。我仍然通過按鈕來控制禁用功能，唯一的區別是我爲表單的重複部分使用了單獨的控制器。

這樣我可以提供一個標誌使用數據服務重複部分的控制器，以使其與整個表單一起被禁用。

爲了達到這個目的，我不得不調整一下重複部分的包裝，但最終的結果正是我想要的。

乾杯。

來源

2017-03-30 07:43:38

這隻會使輸入只讀，並不會影響單選按鈕或複選框。就此而言，按鈕。

做你想做什麼，設定NG單擊事件按鈕：

ng-click="readOnly()"

然後控制器：

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

這將防止發生任何輸入。如果您需要隱藏/禁用按鈕，則可以將readOnly標誌設置爲true，並將按鈕設置爲！model.readOnly時將ng顯示或ng禁用。

如果你想你正在使用的角度，而不是jQuery的，即使angular.element是jQuery的（直出角文檔）的一個別名假裝，那麼你可以做：

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

來源

2017-03-30 03:39:27 MattE

感謝MattE的回答。儘管我沒有用你的方式，因爲我可以在一個月前開始工作。我將發佈我使用的解決方案。再次感謝...乾杯！ –

如何將嵌套的formly表單狀態更改爲只讀按鈕

回答

相關問題