Angulaire 2: 'ngFormModel' car ce n'est pas une propriété native connue

Mon erreur est

 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>

Mon modèle,

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

Mon Composant

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

                    }

                });
    }

}

source d'informationauteur MMR | 2016-07-13

angular forms

Le problème, c'est que vous êtes toujours à l'importation à partir d' common et surtout en utilisant les instructions de l'ancien formes.
Importer correctement les composants pour de nouvelles formes:

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

Et de corriger le composant:

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

    form: FormGroup;

    constructor(fbld: FormBuilder) {

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

        });


    }

    ...

}

Puis corriger la vue: ngFormModel a été remplacé par formGroupet l'utilisation formControl pour votre champs:

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

Modifier. Angulaires 2.0.0-rc.5, est nécessaire pour supprimer les directives de la composante et l'importation de la forme de modules dans AppModule:

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

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

export class AppModule { }

Si vous utilisez un module partagé, n'oubliez pas de les exporter:

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

export class SharedModule { }

0

J'ai eu le même problème. Ce que j'ai fait pour le résoudre:
- supprimer la balise, et ajouter (cliquez)-fonction pour le bouton
- vérifié mon backend: il y a une erreur dans certains cas... il fixe
Maintenant il fait feu deux fois plus.
Alors vérifiez cette! On ne sait jamais...

-1

Il suffit d'importer la déclaration suivante en ts,

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

Faire les changements suivants dans les modèles,

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

Enfin le faire dans votre amorçage,

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

Vous devez vous connecter pour publier un commentaire.