@Angular Form is not displaying ( ngForm [(ngModel)]

Question

iam new with Angular and i try to create a form as ngForm. My Problem is when the programme is succesfully compiled the form isnt displayed on my site. I think that i have an issue with the "ngForm" directive. A former Error Message was : "[ERROR] NG8003: No directive found with exportAs 'ngForm'" Maybe somebody can help me. This is my code

formular.component.html

<form #employee="ngForm" (ngSubmit)="onSubmit()">
    <div class="input">
        <div class="form-group">    
            <label class="label" for="first">Vorname: </label>
            <input class="input" id="first" type="text" [(ngModel)]="firstName" name="firstName" placeholder="Vorname" ngModel="angestellter"/> 
        </div>
        <div class="form-group">
            <label class="label" for="second">Nachname: </label>
            <input class="input" id="second" type="text" [(ngModel)]="lastName" name="lastName" placeholder="Nachname" ngModel="angestellter" /> 
        </div>
        <div class="form-group">
            <label class="label" for="position">Position: </label>
            <input class="input" id="position" type="text" [(ngModel)]="position" name="position" placeholder="Position" ngModel="angestellter" /> 
        </div>
        <div class="form-group">
            <label class="label" for="salary">Gehalt: </label>
            <input class="input" id="salary" type="text" [(ngModel)]="salary" name="salary" placeholder="Gehalt" ngModel="angestellter"/> 
        </div>
        <button type="submit">Senden</button>       
        </div>
</form>

formular.component.ts

import { Component } from '@angular/core';
import { Angestellter } from '../angestellter';

@Component({
  selector: 'app-formular',
  templateUrl: './formular.component.html',
  styleUrl: './formular.component.css',
  
})

export class FormularComponent{

    constructor(public angestellter: Angestellter){}

    onSubmit():void{
        console.log("Hallo");
    };
}

angestellter.ts

export class Angestellter {

    constructor(
        public firstName: string,
        public lastName: string,
        public position: string,
        public salary: string,
    ){}
}

app.component.ts

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormularComponent } from './formular/formular.component';

@NgModule({
  declarations: [
    AppComponent,
    FormularComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks to everyone who answears.

I tried a lot to make the Form bi-directional to the forms model.

You use ngModel so it's template driven form, try adding FormsModule in NgModule imports — Thuan Tran
– Thuan Tran, Commented Dec 19, 2023 at 2:30

truonghungit · Accepted Answer · 2023-12-19 05:53:38Z

1

Import FormModules to your Module

answered Dec 19, 2023 at 5:53

truonghungit

3121 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JB3286 Over a year ago

Thank your for your advice. I imported the FormsModule to my Module.ts. Thank you very much

Collectives™ on Stack Overflow

@Angular Form is not displaying ( ngForm [(ngModel)]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related