Выражение Angular2 (beta3) изменилось после проверки при обновлении значений формы

Это своего рода продолжение моего предыдущего поста о вложенных формах в Angular2 (бета 3 с TS) (Angular2 beta: вложение родительских / дочерних компонентов на основе форм и проверка на основе родительских), но я публикую новый вопрос, поскольку он относится к другому типу вопроса.

Вы можете найти копию проблемы, описанной здесь, на странице http://plnkr.co/edit/iCmmy9at2wF5qY0P6VmV. Короче говоря, в этом фальшивом сценарии у меня есть компонент, представляющий одно слово из воображаемого словаря, и другой дочерний компонент, используемый для представления каждого смысла этого слова; таким образом, между родительским компонентом и его дочерними компонентами существует отношение «один ко многим». Оба имеют шаблон на основе формы, созданный с помощью конструктора форм. Дочерний шаблон находится внутри NgFor, где я привязываю каждое значение из родительской (= слово) модели. Таким образом, все свойства смысла каждого слова автоматически привязываются к модели слова.

К некоторым из этих свойств прикреплено несколько валидаторов (настраиваемых или стандартных). Моя проблема заключается в том, что когда я программно устанавливаю модель слова из родительского компонента (что также подразумевает установку значения элементов управления формы), это, кажется, вызывает некоторое состояние гонки в процессе проверки, которое вызывает несколько исключений типа ИСКЛЮЧЕНИЕ : Выражение '! DefinitionCtl.valid' было изменено после проверки. Предыдущее значение: «истина». Текущее значение: false, что блокирует дальнейшее выполнение кода.

AFAIK, единственная информация, которая, кажется, связана с этой проблемой, находится здесь:

Тем не менее, решение моей проблемы, похоже, не под рукой из этих обсуждений, если (если я хорошо понимаю) я не выберу ручное управление всеми моими привязками, чего я бы хотел избежать, поскольку в реальном приложении будет быть их много. Может ли кто-нибудь помочь?


typescript angular angular2-forms
person Naftis    schedule 05.02.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать отключить режим Angular2 dev:

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {enableProdMode} from 'angular2/core';

enableProdMode();

bootstrap(App, [])
  .catch(err => console.error(err));

Подробнее см. Ответ Гюнтера:

person Thierry Templier    schedule 05.02.2016
comment
Спасибо, это работает! В любом случае, не следует ли мне бояться потенциальных проблем синхронизации между DOM и базовой моделью? Надеюсь, эти острые углы будут отполированы в финальном выпуске NG2 ... - person Naftis; 05.02.2016
comment
enableProdMode не является рекомендуемой хорошей практикой. stackoverflow.com/questions/34364880/ - person cesarpachon; 10.05.2016
comment
Проголосовали против, потому что это не решение. Предупреждающие сообщения появляются не просто так - простое их сокрытие на самом деле не решает основную проблему. - person jessepinho; 12.08.2016
comment
Проголосовано против: это предупреждение о режиме разработки существует не просто так. - person superjos; 22.08.2016
comment
@Claudiu определенно нет, это не лучший ответ. Проверьте ссылку, которую он дал, так как она более солидная. - person Ced; 25.09.2016

arrow_upward
1
arrow_downward

У меня была такая проблема. Об этом много говорилось в https://github.com/angular/angular/issues/6005. У нас была другая ситуация и другое решение (я только что перечислил его на этой странице).

  • Наше приложение Angular - https://github.com/GeoscienceAustralia/GNSS-Site-Manager, имеет реактивные формы модели, которые вложены и построены из нескольких компонентов в ngOnInit(). Некоторые из этих форм свернуты с ngIf в шаблоне
  • Данные также считываются в ngOnInit() и применялись с theModelForm.patchValue(data)
  • Эта ошибка появлялась, когда одна из свернутых форм была развернута. Это связано с тем, что модель DOM не была построена, потому что форма была создана в ngOnInit(), которая не запускалась, пока не была развернута. Выньте patchValue(), и проблема исчезла
  • We came up with two solutions
    1. Before the patchValue() run a this._changeDetectionRef.detectChanges();. And change the ngIf to a [hidden] so that the form and DOM is fully built. The down-side of this is the time and memory cost as the complete form and the related DOM is created (this may not be a problem in many apps but it was for us as we have a gigantic form).
    2. Лучшее решение - применить patchValue() (или setValue(), если данные и поля равны 1: 1) в компонентах, и, таким образом, это происходит только тогда, когда форма создается в ngOnInit().

Я еще не зафиксировал эти изменения (22.03.17).

person HankCa    schedule 22.03.2017