我的错误是,
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');
}
})
}
}
问题是您仍然从常规导入,特别是使用旧表单的说明.
正确导入新表单的组件：
原文链接：https://www.f2er.com/angularjs/142905.html正确导入新表单的组件：
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 { }
