javascript - ngsubmit - ngform angular 6

Error angular 2: no hay ninguna directiva con "exportAs" configurado en "ngModel" con la versión RC4

Question

Estoy usando formularios angulares 2 en mi aplicación y he creado los formularios basados ​​en un enlace dado.

https://angular.io/docs/ts/latest/guide/forms.html

En esto para la validación y para usar API de formularios, he establecido los valores de ngModel como #name="id" #id="ngModel" y arroja un error de script. Pero está resuelto si configuro #id="ngModel" como #id="ngForm" . Pero para mi caso, tengo que establecer el valor de mi modelo en ngModel .

A continuación está mi página html.

 <form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <div class="form-group">
  <label class="control-label" for="id">Employee ID</label>
    <input type="text" class="form-control" required [(ngModel)]="model.id" #name="id"  #id="ngModel" >
    <div [hidden]="id.valid || id.pristine" class="alert alert-danger">
      Employee ID is required
    </div>
  </div>
  <div class="form-group">
    <label for="name">Employee Name</label>
    <input type="text" class="form-control" [(ngModel)]="model.name" name="name" #name="ngModel" required>
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Employee ID is required
        </div>
  </div>
  <div class="form-group">
    <label for="DOJ">DOJ</label>
    <input class="form-control" required [(ngModel)]="model.DOJ" name="DOJ" #DOJ="ngModel"  />
    <div [hidden]="DOJ.valid || DOJ.pristine" class="alert alert-danger">
      DOJ is required
    </div>
  </div>
  <button type="submit" class="btn btn-default" [disabled]="!myForm.form.valid">Submit</button>
</form>

A continuación está mi problema.

      EXCEPTION: Template parse errors:
       There is no directive with "exportAs" set to "ngModel" ("
         <div>
          <h1>My Form</h1>
             <form (ngSubmit)="onSubmit()" [ERROR ->]#myForm="ngModel">
             <div class="form-group>
            <label class="control-label" for="id">Employee"):AppComponent@3:34

Lo he consultado con más preguntas y respuestas, la mayoría de ellas me dijeron que debía actualizar la versión de angular2 a RC4 así que actualicé mi aplicación a rc4, pero todavía estoy enfrentando este problema.

A continuación está mi archivo ts:

import {Component} from ''@angular/core'';
import { disableDeprecatedForms, provideForms , NgForm} from ''@angular/forms'';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from ''@angular/common'';


@Component({
selector: ''ej-app'',    
templateUrl: ''app/app.component.html'',
directives: [ CORE_DIRECTIVES,FORM_DIRECTIVES]  
})
  export class AppComponent {
  model = new Employees(null,'''','''');
    onSubmit() { alert("values submitted")}
   constructor() {
     }
     }
        export class Employees {
         constructor( public id: number,public name: string, public DOJ: String ) {  }
}

Answer 1

No mezcle el módulo de formularios nuevos y antiguos.

import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from ''@angular/common'';

importaciones forma cosas de @angular/common . Si usa los formularios nuevos

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms()])

luego usa en su lugar

import {FORM_DIRECTIVES, FormBuilder,Validators,Control,ControlGroup } from ''@angular/forms'';

Answer 2

No importe FORM_DIRECTIVES y CORE_DIRECTIVES porque están en desuso, en su lugar, asegúrese de importar el NgForm . Puedes usar lo siguiente:

import {FormGroup, FormBuilder, FormControl, Validators, NgForm } from ''@angular/forms'';