形式 – 角度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>

我的组件,
从“@ angular / core”导入{Component};
从’@ angular / http’导入{Http,Response,Headers};
从“rxjs / Observable”导入{Observable};
从’rxjs / Subject’导入{Subject};
从’../headers/headers’导入{contentHeaders};
从“@ angular / forms”导入{FORM_DIRECTIVES};
从’@ angular / router’导入{Router,ROUTER_DIRECTIVES};
从“@ angular / common”导入{Control,FormBuilder,ControlGroup,Validators};

@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: ['',profilename :['',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');
 
               }
 
             })
        }
 
 
       }

问题是您仍然从常规导入,特别是使用旧表单的说明.
正确导入新表单的组件：

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,exports: [
        ...
        FormsModule,ReactiveFormsModule
    ]
})
 
export class SharedModule { }

形式 – 角度2：’ngFormModel’,因为它不是已知的本机属性

猜你在找的Angularjs相关文章