Angular - ValueChanges 不更新父表单（ControlValueAccessor）

Question

我有以下代码

https://stackblitz.com/edit/angular-control-value-accessor-form-subscribed-val-egkreh?file=src/app/app.component.html

我已经为表单字段传递了默认值，但如果您单击按钮，它们不会反映在父表单中。

private createFormInstance() {
  this.form = this.fb.group({
    username: ['test', [Validators.required]],
    password: ['test', [Validators.required]],
  });
}

如果您单击提交而不修改任何输入字段，我希望看到默认值出现，但相反，我得到

null

。我只有修改输入字段才能看到数据，但我也有一个场景，我需要提交传递默认值的表单而不需要修改它。

Answer 1

认为您的场景与此问题类似：Angular Custom Form Control - Get default value。

对于您的情况，在呈现自定义表单后，使用

AfterViewInit

生命周期挂钩来触发

this.form.updateValueAndValidity();

这将更新嵌套表单并将其默认值传递给父表单。

import { AfterViewInit } from '@angular/core';

export class LoginFormComponent
  implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {

  ...

  ngAfterViewInit() {
    setTimeout(() => {
      this.form.updateValueAndValidity();
    })
  }
}

演示@StackBlitz