CODEWITHSUNDEEP
angulartypescript
Pablo Aguirre de Souza
Pablo Aguirre de Souza

Reputation: 4149

Can't bind to formControl

I've gone through dozens of answers here and still couldn't figure out why it's not working. Usually it has to do with not importing ReactiveFormsModule but I've done that. I pretty much copied and pasted the code from 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>

Upvotes: 0

Views: 959

Answers (1)

Aman Gupta
Aman Gupta

Reputation: 448

Tried it out and it works fine for me. I don't see any issue with your code either.

Looks like dummy error. Restart IDE and app once - it should work fine.

Upvotes: 2

Related Questions