Anuglar:formgroup需要一个表单组
问题描述:
HI伙计们,下面是我的html文件:
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>
这是我的.ts代码:
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?
答
您的HTML文件:
Your HTML file:
<div [formGroup]="merchantResourceForm">
你的.ts文件:
Your .ts file:
MerchantResourceForm = new FormGroup({
merchantResourceForm不是与MerchantResourceForm相同
"merchantResourceForm" is not the same as "MerchantResourceForm"