Telling an Angular Reactive form to repaint?-CodePudding

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.

CodePudding user response：

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/app/reset-password/reset-password.component.ts