Trouble resetting an Angular Reactive Form in a NativeScript application

When resetting a reactive form in my component, the state is being reflected differently in the template than in the component code.

Example:

onSubmit(): void {
this.form.reset();
this.form.markAsPristine();

console.log('(contact form) pristine', this.form.controls.firstName.pristine);
console.log('(contact form) dirty', this.form.controls.firstName.dirty);
console.log('(contact form) invalid', this.form.controls.firstName.invalid);
}


Which logs:

(contact form) pristine true
(contact form) dirty false
(contact form) invalid true


As expected. However that's not what the template displays in <Label> tags:

(contact form template) pristine false
(contact form template) dirty true
(contact form template) invalid true


I have tried forcing change detection after calling .reset() via .detectChanges() but that has no effect.

How can I correct this problem?

Continue reading...