Angular 2: 'ngFormModel', поскольку он не является известным родным свойством

Моя ошибка:

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

Нельзя привязываться к 'ngFormModel', так как это не известное собственное свойство ("

МОЙ ПРОФАЙЛ

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

"): a @3: 7 Нет директивы с параметром "exportAs", установленным в "ngForm" ( "stname" ] # firstname = "ngForm" >

"): a @9: 85 Нет директивы с параметром "exportAs", установленным в "ngForm" ("/label > ] # lastname = "ngForm" >

Мой шаблон,

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

Мой компонент, import {Component} из '@ angular/core'; import {Http, Response, Headers} из '@angular/http'; import {Observable} из 'rxjs/Observable'; import {Subject} из 'rxjs/Subject'; import {contentHeaders} из '../headers/headers'; импортировать {FORM_DIRECTIVES} из '@angular/forms'; import {Router, ROUTER_DIRECTIVES} из '@angular/router'; import {Control, FormBuilder, ControlGroup, Validators} из '@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');

               }

             })
        }


       }

Ответы

Ответ 1

Просто импортируйте следующий оператор в ts,

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

Внесите следующие изменения в шаблоны,

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

Наконец, сделайте это при загрузке,

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

Ответ 2

Проблема заключается в том, что вы все еще импортируете из common и особенно с использованием инструкций старых форм. Импортируйте правильно компоненты для новых форм:

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

И исправьте компонент:

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

    form: FormGroup;

    constructor(fbld: FormBuilder) {

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

        });


    }

    ...

}

Затем исправьте представление: ngFormModel был заменен на formGroup и используйте formControl для ваших полей:

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

Изменить. Из Angular 2.0.0-rc.5 необходимо удалить директивы из компонента и импортировать модули формы в AppModule:

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

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

export class AppModule { }

Если вы используете общий модуль, не забудьте их экспортировать:

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

export class SharedModule { }

Ответ 3

У меня была такая же проблема. Что я сделал для ее решения:

удалите тег и добавьте (нажмите) -функцию к кнопке
проверил мой backend: произошла ошибка в каком-то специальном событии... исправлено это

Теперь он больше не срабатывает дважды. Так что дважды проверьте это! Вы никогда не знаете...