Anuglar : formgroup ожидает formgroup
Привет, ребята , ниже приведен мой html-файл :
<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>
А это мой код .ts:
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() }); }
Что я уже пробовал:
Я получаю следующую ошибку :
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() });
Может ли кто-нибудь сказать мне, что я должен делать?