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.
Okay, it was quite hard to read what you wanted to achive here. But I think I got it. You want to take entered email from step 1 and copy it to step 2 into email input and form value. Problem was, that control value was set with .setValue(email)
but the html code didn't reflect value change because formControlName
wasn't pointing to that.
I changed html for the second step formControlName
to email and added this.confirmCodeForm.updateValueAndValidity();
just in case (although last one is not explicitly required).
<mat-form-field>
<input
type="email"
matInput
placeholder="email"
formControlName="email"
readonly
/>
</mat-form-field>
Working example: https://stackblitz.com/edit/angular-ivy-qfeglo?file=src%2Fapp%2Freset-password%2Freset-password.component.ts