Anuglar : formgroup expects a formgroup

See more:

HTML

Typescript

HI guys , below is my html file :

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <!--Merchant Resource-->
  <div [formGroup]="merchantResourceForm">
  <mat-step [stepControl]="merchantResource" >
    
      <ng-template matStepLabel>Merchant Resource</ng-template>

      <div class="example-container" ng-app="myApp" ng-controller="formCtrl">


        <table class="merchant-resource-table" cellspacing="0">
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput  ng-model="merchantName" placeholder="Merchant Name" formControlName="MerchantName" required>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput ng-model="tradeName" placeholder="Trade Name" formControlName="TradeName" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput ng-model="registNumber" type="number" placeholder="Registration Number" formControlName="RegistNumber"
                  required>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">

                <mat-select ng-model="language" placeholder="Language" formControlName="Language" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="English">English</mat-option>
                </mat-select>
                <!-- need to be dropdown from db. BWT_LANGUAGE-->
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <mat-select ng-model="legalForm" placeholder="Legal Form" formControlName="legalForm" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="000">N/A</mat-option>
                </mat-select>

                <!-- need to be dropdown from db. BWT_LEGAL_FORM -->
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <mat-select ng-model="businessClass" placeholder="Business Class" formControlName="businessClass" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="5012">5012 - Office and Comm</mat-option>
                </mat-select>

                <!-- need to be dropdown from db. BWT_ISO_BUSS_CLASS -->
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <input  ng-model="extMerchId" matInput type="number" placeholder="External Merchant ID" formControlName="extMerchId"
                  maxLength=required>
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <input ng-model="contactName" matInput placeholder="Contact Name" formControlName="contactName" required>
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <mat-select ng-model="ecomInd" placeholder="E-Commerce Indicator" formControlName="ecomInd" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="000">000</mat-option>
                </mat-select>

                <!-- need to be dropdown from db. BWT_ECOMMERCE_INDICATOR -->
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <mat-select ng-model="taxCountry" placeholder="Tax Country" formControlName="taxCountry" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="NZL">New Zealand</mat-option>
                </mat-select>

                <!-- need to be dropdown from db. BWT_COUNTRY -->
              </mat-form-field>
            </td>
          </tr>
          <tr>
            <td>
              <mat-form-field class="example-full-width">
                <mat-select ng-model="processRegion" placeholder="Processing Region" formControlName="processRegion" required>
                  <mat-option>Clear</mat-option>
                  <mat-option value="906">906</mat-option>
                </mat-select>

                <!-- need to be dropdown from db. BWT_REGION -->
              </mat-form-field>
            </td>
            <td>
              <mat-form-field class="example-full-width">
                <input matInput ng-model="vatNumber" type="number" formControlName="vatNumber" placeholder="VAT Registration Number">
                <!-- if left null inherit merchant ID. -->
              </mat-form-field>
            </td>
          </tr>

        </table>

        <button mat-button matStepperNext mat-raised-button color="primary"  [disabled]="!merchantResourceForm.valid "class="next-buttons">Next</button>
      </div>
   
  </mat-step>
</div>
</mat-horizontal-stepper>

And this is my .ts code:

import {Component, OnInit} from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';





@Component({
 // selector: 'merchant-resource',  
  templateUrl: './merchantResource.component.html',
  styleUrls: ['./merchantResource.component.css'],
})

export class MerchantResourceComponent{
  checked = true;
  panelOpenState = false;


  MerchantResourceForm = new FormGroup({

    merchantName : new FormControl(),
    tradeName : new FormControl(),
    registrationNumber : new FormControl(),
    language : new FormControl(),
    legalForm : new FormControl(),
    businessClass : new FormControl(),
    extMerchId : new FormControl(),
    contactName :  new FormControl(),
    ecomInd : new FormControl(),
    taxCountry : new FormControl(),
    processingRegion : new FormControl(),
    vatNumber : new FormControl()
   });
}

What I have tried:

I am getting the following error :

Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:

       
    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Can someone tell me what should I do?