FormBuilder Control, вызывающий изменение выражения после проверки исключения

У меня есть форма, которая программно создается через 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.

Планкер проблемы | Плункер без модального окна


person Tam    schedule 26.01.2016    source источник
comment
Похоже на github.com/angular/angular/issues/6041.   -  person Günter Zöchbauer    schedule 08.02.2016


Ответы (3)


Спасибо qdouble за решение этой проблемы на Angular Gitter чат.

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

person Tam    schedule 08.02.2016

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

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

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

Ссылки: Ссылка на Angular: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectionStrategy-enum.html

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

Как на самом деле работает обнаружение изменений в Angular 2: http://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

person Tetrapike    schedule 16.01.2017
comment
Это может быть опасно, потому что конкретно отключает обнаружение изменений, которое активируется только в dev и полезно знать о других проблемах: blog.angular-university.io/angular-debugging - person Anthony O.; 19.12.2018
comment
Это решило мою проблему. Большое спасибо. - person kenef; 29.03.2021

использование ngAfterContentChecked исправило ошибку на моей стороне

ngAfterContentChecked(): void {
    this.cd.detectChanges();
}
person wessam yaacob    schedule 26.12.2020