Angular 10: невозможно отключить текстовое поле при выборе радио внутри динамически созданной формы

У меня есть две радиокнопки, за которыми следует каждое текстовое поле, когда я выбираю одно из радио, соответствующее текстовое поле должно быть включено, а другой текст должен быть отключен.

Для справки, я прилагаю код stackblitz, где я пытался воспроизвести проблему. Ну, это происходит только тогда, когда я пытаюсь отключить текстовое поле в форме.

Пример кода — нажмите здесь

Это действительно запутано, я перепробовал все источники, но, к сожалению, не смог найти решение. Я также пытался использовать методы управления формой, такие как disable() enable(), и ничего не давало решения.


angular angular-reactive-forms angular-forms angular-formbuilder reactive-forms
person kishore    schedule 18.03.2021    source источник
comment
Вы можете зарегистрировать событие и проверить консоль. Вам нужно обновить условия. Или подпишитесь на радио valueChanges и обновите соответственно.   -  person Sachin Gupta    schedule 18.03.2021
comment
@SachinGupta Я попробовал это, и я получаю значение изменения на своем радио-вводе, но проблема здесь в том, что свойство отключения текстового поля не работает должным образом.   -  person kishore    schedule 18.03.2021
comment
Это будет работать, если вы удалите formControlName. Значит проблема есть. Попробуйте выяснить, почему.   -  person rdr20    schedule 18.03.2021
comment
@ rdr20 Я пытался удалить formControlName на радио, но это не сработало. Не могу удалить его из текстового поля, потому что мне нужно значение при попытке сохранить, и у меня будет много таких радио-текстовых блоков, как уже упоминалось, это динамическая форма.   -  person kishore    schedule 18.03.2021
comment
в текстовом поле, если вы удалите имя управления формой, оно будет работать. но я знаю, что вам это нужно. но вы можете начать оттуда.   -  person rdr20    schedule 18.03.2021
comment
@ rdr20 да, конечно, это работает, когда я удалил formcontrolname в текстовом поле, но, как я уже сказал, я не могу получить значения своего текстового поля.   -  person kishore    schedule 18.03.2021

Ответы (3)


arrow_upward
1
arrow_downward

Тогда вы можете попробовать это как обходной путь. Просто найдите лучшее решение позже. Но работает следующее.

[attr.disabled]="radio2BoxDisabled ? true: null"
person rdr20    schedule 18.03.2021
comment
Как же я упустил такую ​​маленькую логику, а еще я сообразил, что вместо отключения можно использовать [readonly]= radio2BoxDisabled делает то, что ожидается. - person kishore; 18.03.2021

arrow_upward
0
arrow_downward

Измените свою функцию toggle() на приведенный ниже код. Он работает с версией вашего кода Stackblitz, в которой были имена элементов управления формой. Конечно, с более чем одной группой форм вам придется управлять индексами по-другому.

  toggle(event) {
    if (event.value == "radio1") {
      this.t.at(0).get ('ref').enable();
      this.t.at(0).get ('link').disable();
    } else if (event.value == "radio2") {
      this.t.at(0).get ('ref').disable();
      this.t.at(0).get ('link').enable();
    }
  }
person Trismuto    schedule 18.03.2021

arrow_upward
0
arrow_downward

Вы не можете просто отключить прямой ввод с помощью элементов управления формы. Вам нужно инициализировать его в конструкторе форм

this.formBuilder.group({
          radio: [""],
          ref: [{value:'', disabled: this.radio2BoxDisabled}],
          link: [{value:'', disabled: this.radio1BoxDisabled}]
        })

Я уже обновил ваш StackBlitz, посмотрите его здесь: https://stackblitz.com/edit/angular-ivy-mswvnb?file=src%2Fapp%2Fapp.component.ts

См. дополнительные пояснения по вашей проблеме: Отключить поля ввода в реактивной форме

person Stacks Queue    schedule 18.03.2021