In this reset password material stepper demo in the first step the email is collected in a emailForm.
When next is clicked the submitEmail function sets the value of the emailControl to the email entered.
This is the code for that:
submitEmail() {
if (this.emailForm.valid) {
const email = this.emailForm.get('email')!.value;
this.confirmCodeForm.get('email')!.setValue(email);
console.log('THE EMAIL IS: ', this.confirmCodeForm.get('email').value);
this.onEmailSubmit.emit(email);
}
}
We can see that the control value email does have the email entered set through this logging statement:
this.confirmCodeForm.get('email').value);
However in the second step the form does not repaint, and thus the email field (Which is readonly) does not reflect the email address entered.
How do we tell the confirmCodeForm to repaint after calling setValue on the email control?
I also tried using patchValue like this:
const email = this.emailForm.get('email')!.value;
this.confirmCodeForm.patchValue({ email });
console.log('THE EMAIL IS: ', this.confirmCodeForm.get('email').value);
this.onEmailSubmit.emit(email);
And the control does have the entered email as its value, but the form does not repaint.