Как сделать «трёхпозиционный» переключатель, в одном из положений которого можно вводить значение (см картинку :))?

Question

[fro-do]

Ребята, привет!
Мне надо сделать форму для ввода результатов измерений по нескольким параметрам.
При этом возможны варианты:
- параметр измерен и всё ок, надо ввести значение измерения;
- параметр не измерили;
- параметр измерили, но значение выглядит сомнительным.

Пока придумался монстр, как на картинке.

Смущает, что он стремноват, да и доп логики надо накручивать, что, если стоит первый радио-баттон ("всё ок"), то поле ввода должно быть активно, в остальных случаях его бы хорошо дизейблить и очищать...

Может быть, есть какой-то более простой и симпатичный вариант?

UPD: как реализовать то, что у меня на картинке, я примерно понимаю. вопрос больше в том - может, можно как-то иначе организовать такое переключение? не radio, например.

Answer 1

[mahmudchon]

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

UPD:
Если сделать несколько "сумбурно", можно реализовать так, чтобы не нужно было сопоставлять ответы при обработке данных с формы, а сразу принимать с каждого input=radio, то при наборе текста в input=text можно закинуть его непосредственно в значение input=radio. Пример:

Comments

[fro-do]

ну, это то, что я сейчас и пытаюсь изобразить :)
но какое-то оно не особо изящное выходит.. вот и думаю, может, есть какой-то способ поаккуратней

Answer 2

[Даниил Братухин]

А почему бы не сделать поле + checkbox? Пользователь вводит результаты только проведённых измерений, а если данные выглядят странно — ставит галку рядом. При этом можно как дать возможность ввести сомнительные данные, так и заблокировать ввод и очистить поле. Модель тоже хорошая получится:

type Results = Array<{
  value: string;
  confidence: number;
}>

if (result.value.length === 0) {
  // не измеряли
} else if (result.confidence === 0) {
  // измерили, но выглядит подозрительно
} else {
  // измерили, всё ок
}