CODEWITHSUNDEEP
angulartypescriptangular-formbuilder
Samarth Saxena
Samarth Saxena

Reputation: 315

Cannot access the nested formGroup's value

I am creating nested formGroup fields. The following is my html

<form [formGroup]="userProfileForm" (ngSubmit)="bookUser()" class="form">
    <!-- userName -->
    <div class="form-group">
      <label for="userName">Name:</label>
      <input type="text" class="form-control" id="userName" formControlName="userName">
    </div>

    <!-- mobile -->
    <div class="form-group">
      <label for="mobileNumber">Mobile:</label>
      <input type="text" class="form-control" id="mobileNumber" formControlName="mobileNumber">
    </div>

    <!-- emailId -->
    <div class="form-group">
        <label for="emailId">Email id:</label>
        <input type="text" class="form-control" id="emailId" formControlName="emailId">
    </div>

    <!-- password -->
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="text" class="form-control" id="password" formControlName="password">
    </div>

    <!-- address -->
    <div class="form-group">
      <div formGroupName="address">
        <label for="city">City:</label>
        <input type="text" class="form-control" id="city" formControlname="city">

        <label for="state">State:</label>
        <input type="text" class="form-control" id="state" formControlname="state">

        <label for="zipCode">Zip Code:</label>
        <input type="text" class="form-control" id="zipCode" formControlname="zipCode">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Create Profile</button>
</form>

And below is the typescript i am using...

ngOnInit() {
    this.userProfileForm=this.formBuilder.group({
      userName:['', Validators.required],
      mobileNumber:['', Validators.required],
      emailId:['', Validators.required],
      password:['', Validators.required],
      address: this.formBuilder.group({
        city:['', Validators.required],
        state:['', Validators.required],
        zipCode:['', Validators.required]
      })
    });
  }

I do not receive the city formControl of the child formGroup when i try to print it in the html. I tried accessing the value in different ways like: (<FormGroup>this.userProfileForm.get('address')).get('city').value; and this.city=this.userProfileForm['controls'].address['controls'].city.value but i still can't get the city field to display in html. I also used this.city=this.userProfileForm['controls'].address['controls'].city.valid and it always returns false.

I have also created 2 model classes: UserProfile

import { Address } from "./address";

export class UserProfile{
    userName:string;
    emailId:string;
    password:string;
    mobileNumber:string;
    address:Address;
}

Address

export class Address{
    city:string;
    state:string;
    zipCode:string;
}

How do i access the nested formGroup values?? What am i doing wrong here?

Upvotes: 1

Views: 1370

Answers (2)

Ali Wahab
Ali Wahab

Reputation: 592

Everything is working fine. Its a typing error your wrote formControlname instead of formControlName. Change small n to Capital N.

<div formGroupName="address">
        <label for="city">City:</label>
        <input type="text" class="form-control" id="city" formControlName="city">

        <label for="state">State:</label>
        <input type="text" class="form-control" id="state" formControlName="state">

        <label for="zipCode">Zip Code:</label>
        <input type="text" class="form-control" id="zipCode" formControlName="zipCode">
      </div>

Upvotes: 1

SELA
SELA

Reputation: 6868

Please find the following solution of @Somdatt_Bhadvariya on How to use formControlName and deal with nested formGroup? it worked for me.

Typescript: 

 this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': [],
        'address': fb.group({
            'street': [''],
            'houseNumber': [''],
            'postalCode': ['']
        })
    });

HTML:

  <form [formGroup]="myForm" >
       <div class="form-group">
          <label for="fullname">Username</label>
          <input type="text" id="username" formControlName="fullname" class="form-control">            
       </div>
       <div class="radio" *ngFor="let gender of genders">
          <label>
          <input type="radio" formControlName="gender" [value]="gender">{{ gender }} </label>
       </div>
       <div formGroupName="address">
          <div class="form-group">
             <label for="street">Username</label>
             <input type="text" id="username" value="street" formControlName="street" class="form-control">            
          </div>
          <div class="form-group">
             <label for="houseNumber">Username</label>
             <input type="text" id="username" value="street" formControlName="houseNumber" class="form-control">            
          </div>
          <div class="form-group">
             <label for="postalCode">Username</label>
             <input type="text" id="username" value="street" formControlName="postalCode" class="form-control">            
          </div>
       </div>
    </form>

Upvotes: 1

Related Questions