Immer Form solution

markup.tsx

<LabeledField label={lingual.event} showRequired={false}>
  <EventDropdown
    placeholder={lingual.pleaseSelect}
    notFoundContent={lingual.pleaseSelect}
    onDeselect={() => {
      this.changeField("event", null);
    }}
    value={form.event}
    onChange={(value) => {
      this.changeField("event", value);
    }}
  />
</LabeledField>
<LabeledFieldInput
  label={lingual.description}
  value={form.description}
  onChange={(value) => {
    this.changeField("description", value);
  }}
  styleInput={{ width: "auto", minWidth: 200 }}
  multiline
/>
<div className={rowParted}>
  <span />
  <div className={row}>
    <Button onClick={this.props.onCancelModal}>{lingual.cancel}</Button>
    <Space width={8} />
    <Button type={"primary"} onClick={this.onConfirm}>
      {lingual.confirm}
    </Button>
  </div>
</div>

methods.tsx

changeField<K extends keyof IProcess>(k: K, v: IProcess[K]) {
  this.immerState((state) => {
    state.form[k] = v;

    if (validationRules[k] != null) {
      state.failures[k] = validationRules[k](state.form as IProcess);
    }
  });
}

onConfirm = () => {
  let form = this.state.form as IProcess;

  let failures = getValidationFailures<IProcess>(validationRules, form);

  this.mergeState({ failures });

  if (isFailuresEmpty(failures)) {
    this.props.onSubmitForm(form);
  }
};

model.tsx

interface IState {
  form: Partial<IProcess>;
  failures: IShapedFailures<IProcess>;
}

const validationRules: IShapedRules<IProcess> = {
  name: (form: IProcess) => formValueRequired(form.name),
  kind: (form: IProcess) => formValueRequired(form.kind),
};