FormBuilder Control, вызывающий «Выражение изменилось после его проверки» exception

Question

У меня есть форма, которая создается программно через DynamicComponentLoader::loadIntoLocation. Код формы ниже:

constructor (
    private _builder: FormBuilder 
) { 
    this.editForm = _builder.group({ 
     name: ['', Validators.required], 
     email: ['', Validators.compose([Validators.required, Helpers.emailValidator])], 
     phone: [''], 
     phoneAlt: [''], 
     location: [''], 
     dob: [''], 
     bio: [''], 
    }); 
} 

Вы заметите, что некоторые формы не имеют валидаторов (насколько я могу сказать, это то же самое, как с помощью Validators.nullValidator, я тестировал с обоими) ,

В моем шаблоне у меня есть следующий код (для каждого элемента управления):

<label for="phone">Contact Number <span *ngIf="!phone.valid">- {{e(phone)}}</span></label> 
<input type="text" name="phone" id="phone" ngControl="phone" #phone="ngForm"> 

Первый элемент управления, который не имеет валидатор выдает следующее исключение дважды, когда он попадает в !phone.valid часть шаблона:

EXCEPTION: Expression '!phone.valid in e@15:43' has changed after it was checked. Previous value: 'true'. Current value: 'false' in [!phone.valid in e@15:43] 

ни в одной точке я задевая управления или this.editForm после первоначального создания, так, насколько мой код, то, ничего не должно измениться.

Я знаю, что могу подавить ошибки, позвонив enableProdMode(), но я скорее исправлю проблему, чем спрячу ее.

Редактировать (8 февраля): С тех пор я попытался переместить содержимое модального файла на отдельную страницу, но ошибки сохраняются. Это предполагает, что проблема не связана с тем, как я создаю и загружаю модалы, а скорее ControlGroup или FormBuilder.

Plunker of the issue | Plunker without modal

Answer 1

Благодаря qdouble для решения этого вопроса для меня на чат Angular Gitter.

Вопрос был вызван порядком, в котором угловая анализировала страницу. Переходя сверху вниз, ngIf="!phone.valid" разбирался до того, как был начат phone.valid. Это было легко устранено добавлением catch в оператор if, чтобы убедиться, что он не был нулевым *ngIf="phone.valid === null ? false : !phone.valid" (или перемещением метки после ввода).

Answer 2

Это была проблема, с которой я столкнулся.

Угловой 2 представил функцию, позволяющую лучше справляться с обнаружением изменений. Угловой 2 уменьшает циклы дайджеста в пользу одностороннего потока, который примерно в 3-10 раз быстрее и лучше обрабатывает асинхронную логику.

@Component({ 
    ... 
    changeDetection: ChangeDetectionStrategy.OnPush 
})... 

Ссылка: Угловая Ссылка: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

Понимание обнаружение изменения: https://auth0.com/blog/understanding-angular-2-change-detection/

Как Угловой 2 Change Detection действительно работает: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/