我的错误是,
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 { }