Issue
I am getting started with Angular Forms and the extremely steep associated learning curve.
Following along with this example for a reactive form here.
However when I try this locally I am getting the compile error:
Error: src/app/car-create-form/car-create-form.component.html:2:45 - error TS2339: Property 'name' does not exist on type 'CarCreateFormComponent'.
2 <input id="name" type="text" [formControl]="name">
~~~~
src/app/car-create-form/car-create-form.component.ts:5:16
5 templateUrl: './car-create-form.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CarCreateFormComponent.
The declaration module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { CarCreateFormComponent } from './Car-create-form/Car-create-form.component';
@NgModule({
declarations: [
AppComponent,
CarCreateFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ReactiveFormsModule,
FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The component:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-car-create-form',
templateUrl: './car-create-form.component.html',
styleUrls: ['./car-create-form.component.css']
})
export class CarCreateFormComponent {
name = new FormControl('');
}
And the html:
<label for="name">Name: </label>
<input id="name" type="text" [formControl]="name">
I have strictly followed the example - so what is wrong here?
Solution
In HTML, you should use formControlName="name"
for the input for connecting your control that you define in the .ts
file to the HTML.
Answered By - Airin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.