How do I set the value of a nested formBuilder group by a html form

Question

Example of a nested formBuilder:

ngOnInit() {
  this.user = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    quest1: ['', Validators.required],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}

And my html form example:

    <form class="ui-fluid form-group" [formGroup]="user ">
        <div class="ui-g-12 ui-md-6">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="name">
                      <label>Name</label>
                </span>
         </div>
         <div class="ui-g-12 ui-md-6">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="quest1">
                      <label>Question</label>
                </span>
         </div>
         <div class="ui-g-12 ui-md-6">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="account.email">
                      <label>Email</label>
                </span>
         </div>
         <div class="ui-g-12 ui-md-6">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="account.confirm">
                      <label>Confirm</label>
                </span>
         </div>
</form>

I set my nested controller group as formControlName="account.confirm" but it's not getting value from it. How can I set nested formcontrol in my form?

Answer 1

You have to use formGroupName i.e,

<div formGroupName="account">

and subsequently use just the control name within the inner form group

<input type="text" pInputText formControlName="confirm">

---

Now the inner form will look like:

<form class="ui-fluid form-group" [formGroup]="user">
    ... 
    <div formGroupName="account">
       ...
       <input type="text" pInputText formControlName="email">
       ...   
       <input type="text" pInputText formControlName="confirm">

    </div>

</form>