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'';