Получите ошибку «выражение было изменено после проверки» при использовании чистых и допустимых флагов

В Angular документация я обнаружил, что пример использует чистые и действительные флаги. Но когда я присваиваю их свойствам компонента, я получаю ошибку «Expression has changed after it was checked». Почему это происходит? И как можно решить эту проблему?

Вы можете увидеть пример

проверьте ответ, если вы можете дать больше кода, я могу пойти и проверить более подробную информацию

Pranay Rana 11.04.2018 12:53

Вы можете увидеть пример из документации angular. И там у меня ошибки не возникает. Но если вы запустите мой пример, вы обнаружите ошибку, если введете значение во второй ввод

vlado 11.04.2018 13:10
4
2
1 793
1

Ответы 1

Возникла проблема с вашим кодом, который вы пытаетесь изменить атрибут isValid, проверяя тот же исходный элемент управления, это даст вам ошибку

   <text-box
        formControlName="emailControl"
        [(ngModel)]="formData.email"
        [isValid]="emailControl.pristine">
    </text-box>

в основном вы пытаетесь изменить значение элемента управления, управляя им самим, и это вызывает проблемы и дает вам ошибку.

Вы можете проверить это, я создал свой собственный элемент управления для проверки, здесь:
Компонент пользовательской проверки Angular, это может соответствовать вашим требованиям.


Вы получаете сообщение об ошибке, потому что вы связываете значения с элементами управления html, и эти значения меняются во время цикла обнаружения изменений angular. В основном эта ошибка возникает, когда значения свойств ParentComponent изменяются ChildComponent.

в решении, чтобы выйти, это принудительное обнаружение изменений из родительского компонента, как это

export class AppComponent {

    constructor(private cd: ChangeDetectorRef) {
    }

    ngAfterViewInit() {
        this.cd.detectChanges();
    }
    //rest of the code 
}

проверьте это: Все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError

Следует ли мне вызывать этот метод внутри пользовательского компонента?

vlado 11.04.2018 13:07

@vlado - да, это должен быть родительский, надеюсь, вы поняли мою точку зрения

Pranay Rana 11.04.2018 13:09

@vlado - можете ли вы поделиться кодом, что бы вы ни пробовали, на stackbiz

Pranay Rana 11.04.2018 13:37

Вы можете увидеть здесь пример stackblitz.com/edit/angular-b9hhcn?file=app%2Ftextbox.ts

vlado 11.04.2018 13:51

@vlado - проверьте мое обновление, я создал собственный компонент и поделился им также с вами в виде ссылки

Pranay Rana 11.04.2018 14:12

Означает ли это, что я не могу использовать эти флаги для опций? Мне это не нужно для проверки. Я добавил эту опцию только для примера

vlado 11.04.2018 14:36

вы можете сделать так, как этот <div * ngIf = "emailControl.pristine"> элемент управления изменен </div> ... если вы хотите проверить, прямо сейчас вы изменяете свойство привязки, которое вызывает проблему .. если вы можете проверить мою реализацию Я сделал то, что предлагал, чтобы показать ошибку

Pranay Rana 11.04.2018 14:39

Пробовал задать вопрос на гитхабе. Я получил такой ответ: «Не стоит смешивать шаблонную форму с реактивной».

vlado 12.04.2018 13:10

@vlado - да, только что получил, так как вы используете оба formControlName="emailControl" [(ngModel)]="formData.email", это тоже вызывает проблемы

Pranay Rana 12.04.2018 13:29

@vlado - но ошибка, с которой вы столкнулись, связана с изменением значений, которые вы должны изменить во время цикла обнаружения угловых изменений

Pranay Rana 12.04.2018 13:30

Я попытался привести два примера. Первый был основан на форме, и там я использовал ngModel. И все работает хорошо. Во втором я опирался на реактивную форму. И установите значения с помощью метода setValue. Это тоже работает без ошибок. Может быть, есть проблемы с опцией привязки при использовании ngModel в реактивной форме?

vlado 12.04.2018 13:53

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

Pranay Rana 12.04.2018 14:55

@vlado - если вы добрались до ссылки на статью, которую я дал, я предоставил оба отдельно, значит, я предоставил отдельный пример для формы, управляемой шаблоном, и приложения реактивной формы

Pranay Rana 12.04.2018 15:00

так что решение этой проблемы - «не использовать форму с реактивными формами»?

vlado 12.04.2018 17:51

Другие вопросы по теме