未捕获的错误：模板解析错误：无法绑定到“ FormGroup”，因为它不是“ form”的已知属性
[英]Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'
问题描述
I am trying to do form binding in angular 4 . 
我正在尝试在angular 4进行表单绑定。 Below is my code. 下面是我的代码。
app.component.ts app.component.ts
import { Component, Input, OnChanges, SimpleChange, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
firstname: new FormControl('First Name'),
lastname: new FormControl(''),
languages: new FormControl('')
});
}
onSubmit = function(user) {
console.log(user);
};
}
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ProductComponent } from './product/product.component';
import { MemberComponent } from './member/member.component';
import { ItemListComponent } from './item-list/item-list.component';
import { SortPipe } from './app.sort';
@NgModule({
declarations: [
SortPipe,
AppComponent,
ProductComponent,
MemberComponent,
ItemListComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
providers: [],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
bootstrap: [AppComponent],
})
export class AppModule { }
app.component.html app.component.html
<form [FormGroup]="form" (ngSubmit)="onSubmit(form.value)">
<input type="text" placeholder="firstname" name="firstname" formControlName="firstname" />
<br>
<input type="text" placeholder="lastname" name="lastname" formControlName="lastname" />
<br>
<select name="languages" formControlName="languages">
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Angular">Angular</option>
</select>
<br><br>
<input type="submit" value="submit" />
</form>
But I am getting the following error 但是我收到以下错误
Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'.
1 个解决方案
解决方案1
3 已采纳 2017-09-20 14:15:47
Seems you have mistyped. 您输入的内容似乎错误。
It should be f ormGroup instead of F ormGroup: 它应该是f ormGroup而不是F ormGroup：
<form [formGroup]="form"
because FormGroupDirective looks like: 因为FormGroupDirective看起来像：
@Directive({
selector: '[formGroup]',
...
})
export class FormGroupDirective extends ControlContainer implements Form,
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.