angolare 2: 'ngFormModel' dato che non è una proprietà nativa noto

Question

Il mio errore è,

EXCEPTION: Error: Uncaught (in promise): Template parse errors: 

non può legarsi a 'ngFormModel' dato che non è una proprietà nativa noto ("

MIO PROFILO

] [ngFormModel] = "forma" (ngSubmit) = "onSubmit (form.value)">

"): una @ 3: 7 non v'è alcuna direttiva con "exportAs" set a "ngForm" ("stname ] # Firstname = "ngForm">

"): una @ 9: 85 Non v'è alcuna direttiva con "exportAs" impostato su "ngForm"("/label> ] # cognome = "ngForm">

mio modello,

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

mio Component, importazione {Component} da '@ angolare/core'; import {Http, Response, Headers} da '@ angular/http'; importare {Observable} da 'rxjs/Observable'; importare {Subject} da 'rxjs/Subject'; importare {contentHeaders} da "../headers/headers"; importare {FORM_DIRECTIVES} da "@ angular/forms"; importare {Router, ROUTER_DIRECTIVES} da '@ angular/router'; importare {Control, FormBuilder, ControlGroup, Validators} da '@ 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

Basta importare il seguente dichiarazione in ts,

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

Effettuare le seguenti modifiche nei modelli,

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

Infine farlo nel vostro bootstrap,

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

Answer 2

Il problema è che si sta ancora l'importazione da common e soprattutto utilizzando le istruzioni delle vecchie forme. importa correttamente i componenti per nuove forme:

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

e correggere il componente:

@Component({ 
    ... 
    directives: [FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES] 
}) 
export class AppComponent { 

    form: FormGroup; 

    constructor(fbld: FormBuilder) { 

     this.form = fbld.group({ 
      ... 

     }); 


    } 

    ... 

} 

quindi correggere la vista: ngFormModel è stato sostituito dal formGroup, e utilizzare formControl per i vostri campi:

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

Modifica. Da Angular 2.0.0-rc.5, è necessario rimuovere le direttive dal componente e importare i moduli della maschera in AppModule:

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [ 
     ... 
     FormsModule, 
     ReactiveFormsModule 
    ], 
    ... 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

Se si utilizza un modulo condiviso, non dimenticare di esportare loro:

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

export class SharedModule { } 

Answer 3

Ho avuto lo stesso problema. Quello che ho fatto per risolverlo:

• rimuovere il tag, e aggiungere (click) -funzione al pulsante
• controllato il mio back-end: c'è stato un errore in qualche evento speciale ... ha riparato

Ora non si attiva più due volte. Quindi ricontrollalo! Non si sa mai ...