在FomanticUI中动态更新必填字段不会删除必填UI元素

如何解决在FomanticUI中动态更新必填字段不会删除必填UI元素

这是正在发生的事情的JS小提琴：https://jsfiddle.net/perezdev/r5qg3xsa/18/。我正在动态设置JSON的必填字段。如果从第一个下拉列表中选择“必需”，则第二个下拉列表将成为必需的并立即生效。如果您从第一个下拉列表中选择“不需要”，则不再需要第二个下拉列表，但UI不会更新。每次更改后，我都在验证表单，并尝试使用remove states，不使用它。

HTML：

<form id="test" class="ui form">
  <div class="field">
    <select id="field1" class="ui selection clearable dropdown">
      <option value=""></option>
      <option value="0">required</option>
      <option value="1">Not required</option>
    </select>
  </div>

  <div class="field">
    <select id="field2" class="ui selection clearable dropdown">
      <option value=""></option>
      <option value="0">required</option>
      <option value="1">Not required</option>
    </select>
  </div>
</form>

JS：

$(document).ready(function() {
  $('#field1').dropdown({
    'onChange': function(value,text,$choice) {
                var required = value == 0 ? true : false;
        SetrequiredFields(required);
    }
  }); 
  
  $('#field2').dropdown(); 
});

function SetrequiredFields(required = false) {
    var formFields = GetrequiredFields(required);
    $('.ui.form').form({
        on: 'blur',inline: true,fields: formFields,});
    
    $('.ui.form').form('remove states');
    $('.ui.form').form('validate form');
}

function GetrequiredFields(required = false) {
  var fields = {};

  if (required) {
    var assignedToJson = {
      field2: {
        rules: [{
          type: 'empty',prompt: 'Assigned to person is required for this group.'
        }]
      }
    };
    $.extend(fields,assignedToJson);
  }
  
  return fields;
}