app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { InputFormatDirective } from './input-format.directive';
import { ContactFormComponent } from './contact-form/contact-form.component';
@NgModule({
declarations: [
AppComponent,
InputFormatDirective,
ContactFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
contact-form.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
form = new FormGroup({
username: new FormControl(),
password: new FormControl()
});
}
contact-form.component.html
<form [FormGroup]="form">
<div class="form-group">
<label for="username">Username</label>
<input
formControlName="username"
id="username"
type="text"
class="form-control"
/>
</div>
<div class="form-group">
<label for="password">Passowrd</label>
<input
formControlName="password"
id="password"
type="text"
class="form-control"
/>
</div>
<button class="btn btn-info" type="submit">Sign Up</button>
</form>
错误:
Uncaught Error: Template parse errors:
Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("<form [ERROR ->][FormGroup]="form">
<div class="form-group">
<label for="username">Username</label>
"): ng:///AppModule/ContactFormComponent.html@0:6
at syntaxError (compiler.js:2426)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
at compiler.js:26076
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
at compiler.js:25986
at Object.then (compiler.js:2417)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25985)
这里我遇到了错误。
看来我缺少了一些东西。 我也将所有包都导入了我的应用程序模块中。 仍然无法弄清问题所在。
我检查了stackoverflow的其他答案,但无法解决。
请看看。
显示
Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("
答案 0 :(得分:1)
只需将FormGroup
属性更改为小骆驼案例:formGroup
<form [formGroup]="form">
那应该可以解决您的错误。
顺便说一句,我认为您使用的是这样的Angular Lint。