Angular FormControl values not being displayed on inputs

Issue

This is a simplified version of my code:

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

  }
}

Here is my Template:

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

I even tried wrapping everything between the form element in an

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

But the values of the text inputs are blank. Am I missing something?

Solution

You don't need the wrapper with formGroupName="customer" for each form control.

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

Change your HTML form by removing formGroupName="customer" as:

<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

Answered By - Yong Shun