Angular FormControl values not being displayed on inputs

Question

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?

<input placeholder="{{ placeholder }}" [formControl]="inputControl" /> — Fiehra
– Fiehra, Commented Mar 12, 2022 at 1:38
You don't need the wrapper <div class="control" formGroupName="customer">. — Yong Shun
– Yong Shun, Commented Mar 12, 2022 at 2:52

Yong Shun · Accepted Answer · 2022-03-12 02:58:45Z

3

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 Mar 12, 2022 at 2:58

Yong Shun

54.6k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular FormControl values not being displayed on inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related