Angular 2+ Ошибка - Uncaught Ошибка: Ошибки синтаксического анализа шаблона: нет директивы с «exportAs», установленным в «ngModel» («-group»>

Question

Я использую Angular 2+ форм.

Ошибка в деталях: необработанная ошибка: ошибки синтаксического анализа шаблона: нет директивы с параметром "exportAs", установленным в "ngModel" ("-group"> Имя) #firstName = "ngModel" (change) = " log (firstName) "id =" firstName "class =" form-control ">) в JitCompiler._compileComponents (компилятор. js: 25895) в компиляторе. js: 25808 в Object.then (компилятор. js : 2166) в JitCompiler._compileModuleAndComponents (компилятор. js: 25807)

Ниже приведен мой контакт-form.component. html страница:

   <form>
         <div class="form-group">
        <label for="firstName">First Name</label>
        <input required ngModel name="firstName" #firstName = "ngModel" (change) ="log(firstName)" id="firstName"  class="form-control">
        <div class="alert alert-danger" *ngIf = "!firstName.valid">First Name is required</div>
        </div>
        <div class="form-group">
            <label for="comment">Comment</label>
            <textarea ngModel name ="comment" id="comment" cols="30" rows="10" class="form-control"></textarea>
        </div>

        <button class="btn btn-primary">Submit</button>

    </form>

below is my contact-form.component.ts page  : 




import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'contact-form',
      templateUrl: './contact-form.component.html',
      styleUrls: ['./contact-form.component.css']
    })
    export class ContactFormComponent {

      log(x) {
      console.log(x);
       }

    }

Answer 1

Кажется, вы смешиваете обе формы. Вместо этого:

<input required ngModel name="firstName" #firstName = "ngModel" (change)="log(firstName)" id="firstName"  class="form-control">

Я бы предложил попробовать (при условии, что вы создаете свойство firstName в ContactFormComponent):

<input required [(ngModel)]="firstName" name="firstName" id="firstName" class="form-control">