Отключенные элементы управления Angular 2 не включаются в form.value

113

Я заметил, что если я отключу элемент управления в реактивной форме Angular 2, элемент управления не будет включен в form.value. Например, если я определю свою форму, как показано ниже:

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

и проверьте this.notelinkingForm.value, если все элементы управления включены, то вывод будет следующим:

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"}

Однако, когда некоторые элементы управления отключены, это будет:

{"Enabled":true}

Обратите внимание, как исключены отключенные элементы управления.

Мое намерение состоит в том, чтобы при изменении формы я мог передать form.value со всеми содержащимися в нем свойствами в мой API для отдыха. Очевидно, это будет невозможно, если он не содержит отключенных элементов.

Мне что-то здесь не хватает или это ожидаемое поведение? Есть ли способ указать Angular включить отключенные элементы в form.value?

Приветствую твои мысли.

angular angular2-forms

— Джим Калверуэлл
источник

247

Ты можешь использовать:

this.notelinkingForm.getRawValue()

Из документов :

Если вы хотите включить все значения независимо от статуса отключения, используйте этот метод. В противном случае valueсвойство - лучший способ получить значение группы.

— Sasxa
источник

42

Интересно, зачем команда Angular сделала это?

— inorganik

@inorganik Они сделали это потому, что можно включить отключенный элемент управления и изменить его значение. В этом случае getRawValue () вернет объект с измененным значением.

— Датский

1

На самом деле это хорошо. Например, я знаю, что значения моих отключенных элементов управления не изменятся, поэтому я не хочу включать их в API сохранения, потому что я изначально присвоил этим элементам управления значение из базы данных. Но в некоторых случаях я действительно хочу включить те элементы управления, которым присвоены значения из внешнего интерфейса, и они не хранятся в БД, и эта функция покрывает их. Всегда хорошо иметь оба варианта.

— ChiragMS

Это правда @ChiragMS. Мне нравится этот аспект, пока у меня есть выбор между readonlyи disabled. Но это не относится, например, к флажкам и переключателям, как я описал в ответе ниже. В этих случаях мне не нравилось, что я должен получать данные по-другому и кодировать что-то специально для этого случая.

— Сандро,

10

Другой вариант, который я использую:

this.form.controls['LinkToPreceeding'].value;

— Луис Рикардо Каэтано Эррера
источник

7

Спасибо @Sasxa за то, мне 80% того, что мне было нужно.

Для тех из вас, кто ищет решение той же проблемы, но для вложенных форм я смог решить, изменив свой обычный

this.notelinkingForm.get('nestedForm').value

к

this.notelinkingForm.getRawValue().nestedForm

— эпер
источник

0

Если вы используете readonlyвместо этого, disabledон все еще недоступен для редактирования, а данные будут включены в форму. Но это возможно не во всех случаях. Например, он недоступен для переключателей и флажков. См. Веб-документацию MDN . В таких случаях вам необходимо подать заявку на другие предлагаемые здесь решения.

— Сандро
источник