forms - page - change title angular 4

Angular 2: ''ngFormModel'' ya que no es una propiedad nativa conocida

Question

Mi error es

 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can''t bind to ''ngFormModel'' since it isn''t a known native property ("
<h3 class = "head">MY PROFILE</h3>
<form [ERROR ->][ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
"): a@3:7
There is no directive with "exportAs" set to "ngForm" ("stname</label>
<input type="text" id="facebook" class="form-control" ngControl="firstname" [ERROR ->]#firstname="ngForm" >
</div>
"): a@9:85
There is no directive with "exportAs" set to "ngForm" ("/label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" [ERROR ->]#lastname="ngForm" >
</div>

Mi plantilla

<h3 class="head">MY PROFILE</h3>
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" ngControl="firstname" #firstname="ngForm">
</div>
<div *ngIf="firstname.touched">
<div *ngIf="!firstname.valid" class="alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm">
</div>
<div *ngIf="lastname.touched">
<div *ngIf="!lastname.valid" class="alert alert-danger">
<strong>Last name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">Profilename</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="profilename" #profilename="ngForm">
</div>
<div class="form-group">
<label class="formHeading">Phone</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="phone" #phone="ngForm">
</div>
<div *ngIf="phone.touched">
<div *ngIf="!phone.valid" class="alert alert-danger">
<strong>Phone number is required</strong>
</div>
</div>
<label class="formHeading">Image</label>
<input type="file" name="fileupload" ngControl="phone">
<div class="form-row btn">
<button type="submit" class="btn btn-primary " [disabled]="!form.valid">Save</button>
</div>
</div>
</form>

Mi componente

import {Component} from ''@angular/core'';
import { Http, Response, Headers} from ''@angular/http'';
import {Observable} from ''rxjs/Observable'';
import {Subject} from ''rxjs/Subject'';
import {contentHeaders} from ''../headers/headers'';
import {FORM_DIRECTIVES} from ''@angular/forms'';
import {Router, ROUTER_DIRECTIVES} from ''@angular/router'';
import {Control, FormBuilder, ControlGroup, Validators} from ''@angular/common'';
@Component({
templateUrl: ''./components/profile/profile.html'',
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
})
export class Profile {
http: Http;
form: ControlGroup;
constructor(fbld: FormBuilder, http: Http, public router: Router) {
this.http = http;
this.form = fbld.group({
firstname: ['''', Validators.required],
lastname: ['''', Validators.required],
profilename: ['''', Validators.required],
image: [''''],
phone: [''''],
});
}
onSubmit(form: any) {
console.log(form);
let body = JSON.stringify(form);
var headers = new Headers();
this.http.post(''http://localhost/angular/index.php/profile/addprofile'', body, {
headers: headers
})
.subscribe(
response => {
if (response.json().error_code == 0) {
alert(''added successfully'');
this.router.navigate([''/demo/professional'']);
} else {
alert(''fail'');
}
});
}
}

Answer 1

El problema es que todavía estás importando desde el common y, especialmente, utilizando las instrucciones de los formularios antiguos. Importar correctamente los componentes para nuevos formularios:

import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from ''@angular/forms'';
import {FormBuilder, FormGroup, Validators} from ''@angular/forms'';

Y corrige el componente:

@Component({
...
directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES]
})
export class AppComponent {
form: FormGroup;
constructor(fbld: FormBuilder) {
this.form = fbld.group({
...
});
}
...
}

Luego corrija la vista: ngFormModel ha sido reemplazado por formGroup , y use formControl para sus campos:

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" [formControl]="form.controls[''firstname'']" >
</div>
<div *ngIf ="form.controls[''firstname''].touched">
<div *ngIf ="!form.controls[''firstname''].valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
...
<div class="form-row btn">
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Save</button>
</div>
</div>
</form>

Editar. Desde Angular 2.0.0-rc.5, es necesario eliminar las directivas del componente e importar los módulos de formulario en AppModule :

import { FormsModule, ReactiveFormsModule } from ''@angular/forms'';
@NgModule({
imports: [
...
FormsModule,
ReactiveFormsModule
],
...
bootstrap: [AppComponent]
})
export class AppModule { }

Si utiliza un módulo compartido, no olvide exportarlos:

@NgModule({
imports: [
...
FormsModule,
ReactiveFormsModule
],
exports: [
...
FormsModule,
ReactiveFormsModule
]
})
export class SharedModule { }

Answer 2

Solo importa la siguiente declaración en ts,

import {FORM_DIRECTIVES, FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES} from ''@angular/forms'';
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],

Realice los siguientes cambios en las plantillas,

<h3 class = "head">MY PROFILE</h3>
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" [formControl]="form.controls[''firstname'']">
</div>
<div *ngIf ="firstname.touched">
<div *ngIf ="!firstname.valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls[''lastname'']">
</div>
<div *ngIf ="lastname.touched" >
<div *ngIf = "!lastname.valid" class = "alert alert-danger">
<strong>Last name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">Profilename</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls[''profilename'']" >
</div>
<div class="form-group">
<label class="formHeading">Phone</label>
<input type="text" id="facebook" class="form-control col-xs-3" [formControl]="form.controls[''phone'']">
</div>
<div *ngIf ="phone.touched" >
<div *ngIf = "!phone.valid" class = "alert alert-danger">
<strong>Phone number is required</strong>
</div>
</div>
<div class="form-row btn">
<button type="submit" class="btn btn-primary " [disabled]="!form.valid">Save</button>
</div>

Finalmente haz esto en tu bootstrapping,

import {provideForms, disableDeprecatedForms} from ''@angular/forms'';
bootstrap(MyDemoApp, [
provideForms(),
disableDeprecatedForms()]);

Answer 3

Tuve el mismo problema. Lo que hice para resolverlo:

• eliminar la etiqueta y agregar (hacer clic) -función al botón
• revisé mi backend: hubo un error en algún evento especial ... lo solucioné

Ahora ya no se dispara dos veces. ¡Así que revisa esto! Nunca sabes...