Develop Reference

Can't bind to 'ngModel' since it isn't a known property of 'input', how to fix in angular 9?

I have imported FormsModule in app.module.ts file.
can anyone tell me where i did mistake ?
Error
app.module.ts
import { FormsModule } from '#angular/forms';
....
imports: [
....
FormsModule,
....
]
about.component.html
<form>
<div class="form-group">
<label for="banner">Banner Image Url</label>
<input type="text"
class="form-control"
[(ngModel)]="banner.banner_image"
id="banner"
name="banner"
/>
</div>
</form>
about.component.ts
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import {UserService} from '../../service/user.service';
class Banner {
id: number;
banner_image: number;
}
#Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
banner: Banner = new Banner();
constructor() {
}
ngOnInit(): void {
}
}

I’ve had problems like this where the build doesn’t pick up a new import. Maybe try re compiling?

Import ReactiveFormsModule in app.module.ts

If this About component is a part of some nested module, then include FormsModule in nested module file.
Including it in app.module.ts will not work.

Angular component is not rendering | angular 9.1.3

I am not able to render component header in my application. I don't get any error also. In browser, It shows the header tag also but text present in header.component.html is not shown.
app.modules.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
bootstrap: [ AppComponent ],
declarations: [HeaderComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'project',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Project';
}
app.component.html
<header></header>
<p>
Hello World
</p>
header.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent{
}
Please help me. :'(

Angular formControl fails to load

I'm following Angular tutorial on forms here:
https://angular.io/guide/reactive-forms
I have this code in 'datasources.component.html':
<form [formGroup]="queryForm">
<label>Query:
<input type="text" formControlName="query">
</label>
And this in 'datasources.component.ts':
import { Component } from '#angular/core';
import { FormGroup, FormControl } from '#angular/forms';
#Component({
selector: 'sql-editor',
templateUrl: './datasources.component.html',
styleUrls: ['./datasources.component.scss']
})
export class DatasourcesComponent {
queryForm = new FormGroup({
query: new FormControl(''),
});
}
I see its stuck at 'websocket : pending'
Also, my original intent is to make it work for 'textarea'. Is the solution going to work for that too?
<textarea class="form-control" rows="5" id="sql-query" [formControl]="query"></textarea>-
I'm using Angular version 7.2:
EDIT:
I see this error in console 'Can't bind to 'formGroup' since it isn't a known property of 'form'

Import ReactiveFormsModule in your AppModule
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }

formGroup, formControl, etc are all directives that are exposed as a part of the ReactiveFormsModule.
If you want to use these directives in a Component, you'll have to either import the ReactiveFormsModule in the Module that this Component is registered in. Or you'll have to export the ReactiveFormsModule from some other module(SharedModule for instance) and then import that module in the module that you have this Component registered in.
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class YourComponentModule { }
Also use the formcontrols like shown below:
<textarea class="form-control" rows="5" id="sql-query" formControlName="query"></textarea>

Angular: Error no directive with "exportAs" set to "ngForm"

I have tried importing the FormsModule and NgForm modules as well as adding the FormsModule to the imports array.
Below is my code:
//our root app component
import { Component, NgModule, VERSION } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {FormsModule, NgForm} from '#angular/forms';
#Component({
selector: 'my-app',
template: `
<form #searchForm="ngForm">
<input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>
`,
styles: [`
.error {
color: red;
font-size: 11px;
}
`]
})
export class App {
public model = {
search: ""
}
constructor() {
}
}
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}
And below is an error printout:
runtime.9ff156e16d788666a54a.js:16 Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm" (" ]#searchForm="ngForm"> ]#inputSearch="ngForm"> This input is required "):
ng:///AppModule/App.html#2:76 Can't bind to 'ngModel' since it isn't a
known property of 'input'. (" ][(ngModel)]="model.search"
ngControl="search" #inputSearch="ngForm"> https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js Loading
https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f #
runtime.9ff156e16d788666a54a.js:16

The error was caused by this line:
#inputSearch="ngForm"
This is the correct line:
#inputSearch="ngModel"
Here is the working example. When you use ngModel within the form tag you also need to provide value for the "name" attribute.
<form #searchForm="ngForm">
<input type="text" required name="search" [(ngModel)]="model.search" #inputSearch="ngModel">
<p class="error" [hidden]="inputSearch.valid"> This input is required</p>
</form>

This ng-directive error is faced when you have not imported the ng-module in your app.component.ts or your component is not imported and added into the declarations of #NgModule({})

import { FormsModule } from '#angular/forms';
[...]
#NgModule({
imports: [
[...]
FormsModule
],
[...]
})

angular 2. Cannot insert one component to another. Template parse errors:...is not a known element

I try to repeat actions from tutorial for adding one component inside another but I am failing.
project structure:
app.component.ts:
import {Component} from "#angular/core"
import {TodoListComponent} from "./todo-list/todo-list.component"
....
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css'],
directives:[ TodoListComponent ]
})
export class AppComponent {
...
}
app.component.html:
...
<todo-list ></todo-list> <!--[todos]="todos"-->
...
todo-list.component.ts
import {Component, Input} from "#angular/core"
//import {Input} from "../../node_modules/#angular/core/src/metadata/directives";
#Component({
selector: "todo-list",
templateUrl: "./app/todo/todo-list.component.html"
})
export class TodoListComponent {
//#Input() todos:Todo[];
}
todo-list.component.html
ololololo
Rmain.ts
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
app.module.ts
import {BrowserModule} from "#angular/platform-browser";
import {NgModule} from "#angular/core";
import {AppComponent} from "./app.component"
import {FormsModule} from "#angular/forms";
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
I open browser and see following:
zone.js:388 Unhandled Promise rejection: Template parse errors:
'todo-list' is not a known element:
1. If 'todo-list' is an Angular component, then verify that it is part of this module.
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">-->
[ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"-->
</section>
</main>
"): AppComponent#14:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'todo-list' is not a known element:
1. If 'todo-list' is an Angular component, then verify that it is part of this module.
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">-->
[ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"-->
</section>
</main>
"): AppComponent#14:8
at TemplateParser.parse (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:7728:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17503:53)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17423:64)
at Set.forEach (native)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17423:21)
at createResult (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:17319:21)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)consoleError # zone.js:388_loop_1 # zone.js:417drainMicroTaskQueue # zone.js:421ZoneTask.invoke # zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError # zone.js:390_loop_1 # zone.js:417drainMicroTaskQueue # zone.js:421ZoneTask.invoke # zone.js:339
Please point me to the mistake. I rechecked tutorial several times and cannot find mistake.

remove directives:[ TodoListComponent ] from AppComponent declaration and add declaration of this component to module like this:
declarations: [AppComponent, TodoListComponent],
Change the Url of todo-list.component.ts to
#Component({
selector: "todo-list",
templateUrl: "./app/todo-list/todo-list.component.html"
})

remove the field 'directives' in app.component.ts and add 'TodoListComponent' in declarations at app.module.ts
your app.module.ts
import {BrowserModule} from "#angular/platform-browser";
import {NgModule} from "#angular/core";
import {AppComponent} from "./app.component"
import {TodoListComponent} from "./todo-list/todo-list.component"
import {FormsModule} from "#angular/forms";
#NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, TodoListComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}