告诉 Angular Reactive 表单重绘？

Question

在此重置密码材料步进器演示中，第一步中的 email 收集在emailForm中。

单击next时， submitEmail function 将 emailControl 的值设置为输入的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 ）不会反映输入的 email 地址。

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

我也试过像这样使用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);

控件确实将输入的 email 作为其值，但窗体不会重绘。

Answer 1

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

我将第二步formControlName的 html 更改为 email 并添加了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