Условно отключить переключатель в группе переключателей внутри реактивной формы в Angular 4

У меня есть реактивная форма, созданная в компоненте, и некоторые formControls определены на ней.

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

Как мне это сделать при создании formControl?

PFB фрагмент кода:

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}

внутри моего шаблона:

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction"></div>

Теперь, как отключить один из них условно? при использовании атрибута [disable] я получаю предупреждение в консоли браузера. Angular не поощряет это делать


angular forms angular-reactive-forms reactive-forms angular4-forms
person nircraft    schedule 20.02.2018    source источник
comment
атрибут: disabled   -  person tinamou    schedule 20.02.2018
comment
вы пытаетесь отключить одну опцию или все?   -  person bryan60    schedule 20.02.2018
comment
@ bryan60 Я думаю, что это всего лишь один, как вы указали, и я небрежно читал раньше: P OP говорит об одном, но правда, это немного неясно.   -  person AJT82    schedule 20.02.2018
comment
@bryan60, только один из них   -  person nircraft    schedule 20.02.2018

Ответы (3)


arrow_upward
6
arrow_downward

Игнорируйте предупреждение браузера и используйте атрибут disabled на входе. Если вы хотите, вы можете использовать:

[attr.disabled]="whatever"

вместо этого следует отключить предупреждение. Угловые реактивные формы в настоящее время не поддерживают отключение отдельных переключателей в группе через API formcontrol/formgroup в соответствии с этой открытой проблемой:

https://github.com/angular/angular/issues/11763

person bryan60    schedule 20.02.2018
comment
В итоге я сделал [attr.disabled] на входах. Я искал более элегантный способ сделать это реактивным образом при инициализации формы. Но, видя давно открытый вопрос, я думаю, что это единственный способ - person nircraft; 23.02.2018
comment
Единственный другой вариант - использовать флажки и написать некоторую логику, чтобы заставить его вести себя как радиополе, но это кажется намного более трудным, чем использование обходного пути attr.disabled - person bryan60; 25.02.2018
comment
Использование [attr.disabled] сработало и для меня. Не уверен, почему у этого был отрицательный голос. Просто будьте осторожны, вам нужно вернуть null, а не false, чтобы включить (не отключить) ввод. - person Tyler Rick; 23.07.2018
comment
[attr.disabled] у меня не сработало использование angular 5.2.0 - person anstue; 03.01.2019
comment
@golfNintyNine определенно работает до текущей версии - person bryan60; 03.01.2019
comment
Этот ссылка помог мне, когда я хотел удалить атрибут disabled из рендеринга, когда он был отрицательным [attr.disabled]="myBoolVar ? '' : null", потому что, когда disabled="false" был подключен к радиовходу, я не смог его выбрать. - person Egel; 10.12.2020

arrow_upward
3
arrow_downward

Для элементов управления Reactive Form вы должны отключить их либо при создании формы, либо позже. Вот как вы делаете оба:

this.heroForm = this.fb.group({
    updateAction: [{ value: null, disabled: true }]
});

or

this.heroForm.get('updateAction').disable();

В противном случае, если вы не хотите отключать элемент управления Reactive Form, вы будете использовать [disabled]="".

person RockGuitarist1    schedule 20.02.2018
comment
реактивная форма не любит [отключить] атрибуты - person nircraft; 23.02.2018
comment
Отредактировано для правильного пути. [attr.disabled] это неправильный способ сделать это. Вам нужно создать formControl для каждого радио, как вы должны это делать в первую очередь. Таким образом, вы можете управлять каждым из них. Если только ваши радиоприемники не генерируются динамически. - person RockGuitarist1; 23.02.2018
comment
Это не то, как вы должны создавать реактивные формы для переключателей. Поле радиокнопок представляет собой один элемент управления формы и не будет работать должным образом с несколькими. В angular существует давняя открытая проблема, заключающаяся в том, что они не поддерживают отключение отдельных переключателей, и в этом случае рекомендуется использовать attr.disabled. Вы можете прочитать все это по ссылке GitHub, которую я предоставил - person bryan60; 25.02.2018
comment
согласен с комментарием выше @bryan60 - person nircraft; 02.03.2018

arrow_upward
0
arrow_downward

Встраивание радиокнопки с fieldset — это еще один вариант отключения этой конкретной радиокнопки:

<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
    <fieldset [disabled]="myDisabledCondition || null">
        <input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction"
    </fieldset>
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction">
</div>

См. также https://stackblitz.com/edit/angular-radio-bug.

person Markus Pscheidt    schedule 08.12.2020