Angular FormControl 值未显示在输入中

Question

这是我的代码的简化版本：

export class CustomerDetails implements OnInit {
  customer: FormGroup;

  constructor() { }

  ngOnInit() {
    initForm();
  }

  initForm(): void {
    this.customer = new FormGroup({
     name: new FormControl("John Doe"),
     address: new FormControl("123 Fake Street")
    });

  }
}

这是我的模板：

<form [formGroup]="customer">
  <div class="control" formGroupName="customer">
    <input type="text" name="name" formControlName="name">
  </div>
  <div class="control" formGroupName="customer">
    <input type="text" name="name" formControlName="address">
  </div>
</form>

我什至尝试将所有内容都包装在

中的表单元素之间

<ng-container formGroupName="customer"></ng-container>

但是文本输入的值是空白的。我错过了什么吗？

Answer 1

您不需要每个表单控件都带有 formGroupName="customer" 的包装器。

<div class="control" formGroupName="customer">

通过删除 formGroupName="customer" 来更改您的 HTML 表单：

<form [formGroup]="customer">
  <div class="control">
    <input type="text" name="name" formControlName="name" />
  </div>
  <div class="control">
    <input type="text" name="name" formControlName="address" />
  </div>
</form>

Demo on Stackblitz

Angular FormControl 值未显示在输入中

Angular FormControl values not being displayed on inputs

angular

angular-reactive-forms

formgroups