kątowa 2: „ngFormModel”, ponieważ nie jest znany rodzimy nieruchomość

Question

Mój błąd jest

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

nie może wiązać się z „ngFormModel”, ponieważ nie jest znana właściwość rodzimy (”

MY PROFIL

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

„): A przy 3 7 Nie ma dyrektywa "exportAs" zestaw do "ngForm" ("nazwa stępki ] # Firstname = "ngForm">

"): a @ 9: 85 Nie ma dyrektywa z "exportAs" na "ngForm"("/label> ] # Nazwisko = "ngForm">

My szablonu

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

My Komponent importu {} z Składnik '@ kątowy/core'; import {Http, Response, Headers} from '@ angle/http'; import {Observable} from 'rxjs/Observable'; zaimportuj {Subject} z 'rxjs/Subject'; importuj {contentHeaders} z "../headers/headers"; zaimportuj {FORM_DIRECTIVES} z "@ angle/formula"; zaimportuj {Router, ROUTER_DIRECTIVES} z "@ kątowego/routera"; importuj {Control, FormBuilder, ControlGroup, Validators} z '@ angle/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

Wystarczy zaimportować Poniższe oświadczenie w ts,

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

wprowadzić następujące zmiany w szablonach,

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

końcu zrobić to w swoim ładującego,

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

Answer 2

Problemem jest to, że jesteś jeszcze importowania z common a zwłaszcza przy użyciu instrukcji starych form. importu poprawnie komponenty do nowych form:

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

i skorygować komponent:

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

    form: FormGroup; 

    constructor(fbld: FormBuilder) { 

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

     }); 


    } 

    ... 

} 

Następnie skorygować widok: ngFormModel został zastąpiony przez formGroup i korzystania formControl dla swoich dziedzinach:

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

Edytuj. Od Angular 2.0.0-rc.5, jest konieczne, aby usunąć dyrektyw z komponentu i importować moduły formularzy w AppModule:

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

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

export class AppModule { } 

przypadku korzystania z udostępnionego modułu, nie zapomnij, aby je wyeksportować:

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

export class SharedModule { } 

Answer 3

miałem ten sam problem. Co zrobiłem go rozwiązać:

• usunąć znacznik i dodać (kliknij) -function przycisku
• sprawdził moje backend: Wystąpił błąd w jakimś szczególnym przypadku ... naprawił

Teraz już nie dwa razy. Więc sprawdź to jeszcze raz! Nigdy nie wiadomo ...