Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'
Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'
我正在尝试在 angular 4
中进行表单绑定。下面是我的代码。
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
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
<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>
但是我收到以下错误
Uncaught Error: Template parse errors:
Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("
-->
][FormGroup]="form" (ngSubmit)="onSubmit(form.value)">
)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26882)
at compiler.es5.js:26769
at Object.then (compiler.es5.js:1679)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768)
at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697)
你好像打错了。
应该是formGroup而不是FormGroup:
<form [formGroup]="form"
因为 FormGroupDirective
看起来像:
@Directive({
selector: '[formGroup]',
...
})
export class FormGroupDirective extends ControlContainer implements Form,
我正在尝试在 angular 4
中进行表单绑定。下面是我的代码。
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
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
<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>
但是我收到以下错误
Uncaught Error: Template parse errors: Can't bind to 'FormGroup' since it isn't a known property of 'form'. (" --> ][FormGroup]="form" (ngSubmit)="onSubmit(form.value)"> ) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26882) at compiler.es5.js:26769 at Object.then (compiler.es5.js:1679) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26768) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697)
你好像打错了。
应该是formGroup而不是FormGroup:
<form [formGroup]="form"
因为 FormGroupDirective
看起来像:
@Directive({
selector: '[formGroup]',
...
})
export class FormGroupDirective extends ControlContainer implements Form,