告诉 Angular 响应式表单重绘？

Question

在此 reset password material stepper demo 中，第一步中的电子邮件是在 emailForm 中收集的。

单击 next 时，submitEmail 函数将 emailControl 的值设置为输入的电子邮件。

这是对应的代码：

  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);
    }
  }

我们可以看到控制值 email 确实有 email 通过此日志语句输入的设置：

this.confirmCodeForm.get('email').value);

但是在第二步中，表单不会重新绘制，因此 email 字段（即 readonly）不会反映输入的电子邮件地址。

我们如何告诉 confirmCodeForm 在 email 控件上调用 setValue 后重新绘制？

我也试过这样使用 patchValue：

      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);

控件确实将输入的电子邮件作为其值，但表单不会重绘。

Answer 1

好吧，很难读到你想在这里实现的目标。但我想我明白了。您想要从步骤 1 中获取输入的电子邮件并将其复制到步骤 2 中的电子邮件输入和表单值中。问题是，控制值是用 .setValue(email) 设置的，但是 html 代码没有反映值的变化，因为 formControlName 没有指向那个。

我将第二步 formControlName 的 html 更改为电子邮件，并添加了 this.confirmCodeForm.updateValueAndValidity(); 以防万一（尽管最后一个未明确要求）。

<mat-form-field>
        <input
          type="email"
          matInput
          placeholder="email"
          formControlName="email"
          readonly
        />
</mat-form-field>

工作示例：https://stackblitz.com/edit/angular-ivy-qfeglo?file=src%2Fapp%2Freset-password%2Freset-password.component.ts

告诉 Angular 响应式表单重绘？

Telling an Angular Reactive form to repaint?

javascript

typescript

angular-material

angular