I've searched through numerous solutions but still can't figure out why my code isn't working. I made sure to import ReactiveFormsModule, following the example in the Official Docs Example.
Error: Can't bind to formControl since it isn't a known property of 'input'.
Module:
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NameEditorComponent } from './name-editor/name-editor.component';
@NgModule({
declarations: [
AppComponent,
NameEditorComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
TS:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-name-editor',
templateUrl: './name-editor.component.html',
styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
name = new FormControl('');
updateName() {
this.name.setValue('Nancy');
}
}
template:
<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">
<p>Value: {{ name.value }}</p>
<button type="button" (click)="updateName()">Update Name</button>