Кутові 2 відключені елементи керування не включаються у value.value

113

Я помітив, що якщо я відключаю елемент керування у реактивній формі Angular 2, то елемент керування не включається у value.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)
});

і перевірте це.notelinkingForm.value, якщо всі елементи керування включені, то вихід буде таким:

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

Однак, коли деякі елементи керування відключені, це буде:

{"Enabled":true}

Зверніть увагу, як виключені елементи керування вимкнено.

Моя мета полягає в тому, що коли форма змінюється, я хочу мати змогу передати form.value з усіма властивостями в ньому до мого API відпочинку. Це очевидно неможливо, якщо він не містить відключених елементів.

Я щось тут пропускаю чи це очікувана поведінка? Чи є спосіб сказати Angular, щоб включити відключені елементи у form.value?

Вітаємо свої думки.

angular angular2-forms

— Джим Калвервелл
джерело

246

Ви можете використовувати:

this.notelinkingForm.getRawValue()

З документів :

Якщо ви хочете включити всі значення незалежно від статусу вимкнено, використовуйте цей метод. В іншому випадку valueвластивість - найкращий спосіб отримати значення групи.

— Сакса
джерело

41

Цікаво, чому на землі команда 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 . У цих випадках вам слід звернутися за іншими рішеннями, представленими тут.

— Сандро
джерело