无法绑定到“ngModel”，因为它不是“输入”的已知属性，如何在 angular 9 中修复？

Question

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 {

    }

}

Answer 1

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

Answer 2

Import ReactiveFormsModule in app.module.ts

Answer 3

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.