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 { }
原文地址:https://www.jb51.cc/angularjs/142905.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。