CODEWITHSUNDEEP
htmlangulartypescriptangular-forms
Erfan Bhuiyan
Erfan Bhuiyan

Reputation: 33

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

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?

Upvotes: 1

Views: 3766

Answers (2)

Sosu Alfred
Sosu Alfred

Reputation: 456

Basically you need three things,

  • formGroup

  • formGroupName

  • formControlName

In your component.ts:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

userForm: FormGroup;

this.userForm = this.fb.group({
   name: ['', [Validators.required, Validators.minLength(2)]],
   quest1: ['', Validators.required],
   account: this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
   })
});

In your Component.html:

<form [formGroup]="userForm" class="ui-fluid form-group">

  <div formGroupName="account" class="ui-g-12 ui-md-6">
    <span class="md-inputfield">
      <input type="text" formControlName="username">
        <label>Name</label>
    </span>
  </div>

  <div formGroupName="account" class="ui-g-12 ui-md-6">
    <span class="md-inputfield">
      <input type="text" formControlName="password">
         <label>Name</label>
    </span>
  </div>

</form>

Upvotes: 0

Nicholas K
Nicholas K

Reputation: 15423

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>

Upvotes: 3

Related Questions