Cannot find control with name: formControlName in angular reactive form

You should specify formGroupName for nested controls

<div class="panel panel-default" formGroupName="address"> <== add this    <div class="panel-heading">Contact Info</div>

Plunker Example

In your HTML code

<form [formGroup]="userForm">    <input type="text" class="form-control"  [value]="item.UserFirstName" formControlName="UserFirstName">    <input type="text" class="form-control"  [value]="item.UserLastName" formControlName="UserLastName"></form>

In your Typescript code

export class UserprofileComponent implements OnInit {    userForm: FormGroup;    constructor(){        this.userForm = new FormGroup({          UserFirstName: new FormControl(),          UserLastName: new FormControl()       });    }}

This works perfectly, it does not give any error.

you're missing group nested controls with formGroupName directive

    <div class="panel-body" formGroupName="address">      <div class="form-group">        <label for="address" class="col-sm-3 control-label">Business Address</label>        <div class="col-sm-8">          <input type="text" class="form-control" formControlName="street" placeholder="Business Address">        </div>      </div>      <div class="form-group">        <label for="website" class="col-sm-3 control-label">Website</label>        <div class="col-sm-8">          <input type="text" class="form-control" formControlName="website" placeholder="website">        </div>      </div>      <div class="form-group">        <label for="telephone" class="col-sm-3 control-label">Telephone</label>        <div class="col-sm-8">          <input type="text" class="form-control" formControlName="mobile" placeholder="telephone">        </div>      </div>      <div class="form-group">        <label for="email" class="col-sm-3 control-label">Email</label>        <div class="col-sm-8">          <input type="text" class="form-control" formControlName="email" placeholder="email">        </div>      </div>      <div class="form-group">        <label for="page id" class="col-sm-3 control-label">Facebook Page ID</label>        <div class="col-sm-8">          <input type="text" class="form-control" formControlName="pageId" placeholder="facebook page id">        </div>      </div>      <div class="form-group">        <label for="about" class="col-sm-3  control-label"></label>        <div class="col-sm-3">          <!--span class="btn btn-success form-control" (click)="openGeneralPanel()">Back</span-->        </div>        <label for="about" class="col-sm-2  control-label"></label>        <div class="col-sm-3">          <button class="btn btn-success form-control" [disabled]="companyCreatForm.invalid" (click)="openContactInfo()">Continue</button>        </div>      </div>    </div>