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

下面是正在发生的事情：。我正在动态设置必填字段JSON。如果从第一个下拉列表中选择Required，则第二个下拉列表将变为Required并立即进行验证。如果从第一个下拉列表中选择“非必需”，则不再需要第二个下拉列表，但UI不会更新。每次更改后，我都会验证表单，并尝试使用“删除状态”和“不删除状态”

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>

$(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;
}