Within the HTML section of your 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>

Inside the Typescript part of your code:

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

This implementation functions flawlessly without any errors.

You have forgotten to include nested controls within the 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>

After encountering a similar error, I successfully resolved it by explicitly declaring the control names in the TypeScript file within the form builder function as shown below:

 this.formGroup = this.formBuilder.group({
        id: [],
        pageName: ['', [Validators.required]],
        urlPage: ['', [Validators.required]],
        title: ['', [Validators.required]],
        description: ['', [Validators.required]],
        pageContent: ['', [Validators.required]],

Encountered the same issue and your solution came to my rescue. When formGroup or formGroupName are not correctly spelled, the control name cannot be located. Simply fix the spelling of formGroup or formGroupName and the problem is resolved.

Creating a dynamic form became essential for me as the number of questions relied on an object. The issue I encountered was resolved when I included ngDefaultControl in my mat-form-field.

<form [formGroup]="questionsForm">
    <ng-container *ngFor="let question of questions">
        <mat-form-field [formControlName]="question.id" ngDefaultControl>
            <mat-label>{{question.questionContent}}</mat-label>
            <textarea matInput rows="3" required></textarea>
        </mat-form-field>
    </ng-container>
    <button mat-raised-button (click)="sendFeedback()">Submit all questions</button>
</form>

Within the sendFeedback() function, I extract the values from my dynamic form by accessing the formgroup's value like this:

sendFeedbackAsAgent():void {
if (this.questionsForm.valid) {
console.log(this.questionsForm.value)
}
}

I encountered a situation where the naming case of the control was inconsistent.

In the HTML file, it was referred to as accountID, while in the TypeScript file it was called accountId. Aligning the case to be consistent between both resolved the issue for me.

Make sure to adjust the formGroup to align with the formControlName.

The crux of the issue lies in ensuring that all database fields are explicitly linked to corresponding fields in your AutoMapperProfile.

This means that form fields should also mirror the names of model properties. The data entered into the form should align with the data stored in the database.

For example, if your AutoMapper Profile specifies 8 fields for your model, then your form should contain eight fields as well. Subsequently, when saving that model to the database, ensure all eight fields are accounted for.

Following these guidelines should address most of the discrepancies...

I managed to fix this issue by utilizing a tag that is relevant to the control in my formBuilder.group using formControlName="xxx"

Within the .ts file:

        this.reportForm = this.formBuilder.group({
            dateFrom: this.dateFromFC,
            dateTo: this.dateToFC,
            user: this.userFC,
        });

Within the .html file:

Within the input of mat-form-field

 <input type="text" matInput formControlName="user" [matAutocomplete]="auto">