Angular2 (ngSubmit) funktioniert nicht

Ich habe gerade erst begonnen Angular2 und mit Blick auf folgende Fehlermeldung beim hinzufügen (ngSubmit) - Attribut, um meine form

Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("


    <form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>

Folgenden sind einige meiner Abhängigkeiten von Paket.json.

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "jquery": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  }

Ich habe Folgendes html-Formular.

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>

    <div class="form-group">
        <label>Title</label>
        <input [(ngModel)]="model.Title" #title="ngModel" name="title" id="title" type="text" class="form-control" value="">
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea [(ngModel)]="model.Description" #description="ngModel" class="summernote form-control" name="description" id="description"></textarea>
    </div>

</form>

Und folgende Kategorie.Komponente Datei

import { Component } from '@angular/core';
import { FormBuilder} from '@angular/forms';
import { Category } from '../../../models/cms/Category';

@Component({
    selector: 'category',
    templateUrl: 'category.template.html'
})
export class CategoryComponent{

    model = new Category("dummyTitle","dummyDescription");

    onSubmit() {
        console.log(this.data);
    }   
}

Kann mir jemand bitte eine Anleitung wie mit diesem problem umzugehen.

haben Sie importiert FormsModule in Ihrem App-Modul-Datei ?
Danke, ja habe ich importiert die FormsModel. Aber kein Gewinn

InformationsquelleAutor Umair Iqbal | 2016-12-14

  1. 8

    Ihnen fehlt eine import-Datei import { NgForm } from '@angular/forms';

    verwenden und Vorlagen-Formulare, so dass Sie nicht brauchen, FormBuilder.

    diesem Weg versuchen

    signup-form.component.html

    <form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

    signup-form.Komponente.ts

    import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'signup-form',
  templateUrl: 'app/signup-form.component.html',
})
export class SignupForm {
  registerUser(form: NgForm) {
    console.log(form.value);
  }
}

    InformationsquelleAutor Amit kumar

  2. 0

    In meinem Fall, meine <button type="submit">Ok</button> war außerhalb der form-Tags.
    Es muss in "form" - tag, um zu arbeiten.

    <form [formGroup]="myForm" (ngSubmit)="submitHandler()">

    <!-- ... form fields here ... -->

    <button type="submit">Ok</button> <!------- must be inside form -->
</form>

    InformationsquelleAutor Nitin Jadhav

Schreibe einen Kommentar