Angular 2：'ngFormModel'，因为它不是已知的本地属性

本文介绍了Angular 2：'ngFormModel'，因为它不是已知的本地属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 我的错误是， EXCEPTION：错误：Uncaught（在promise中）：模板解析错误： 无法绑定到'ngFormModel'，因为它不是已知的本地属性（ MY PROFILE ] [ngFormModel] =form（ngSubmit）=onSubmit（form.value）> ）：a @ 3：7 没有指令将exportAs设置为ngForm（stname ）＃firstname =ngForm> > ）：a @ 9：85 没有指令将exportAs设置为ngForm（/ label> ]＃lastname =ngForm> 我的模板 < code>< h3 class =head> MY PROFILE< / h3> < form [ngFormModel] =form（ngSubmit）= onSubmit（form.value）> < div class =row> < div class =form-group> < label class =formHeading>名字< / label> < input type =textid =facebook class =form-controlngControl =firstname＃firstname =ngForm> < / div> < div * ngIf =firstname.touched> < div * ngIf =！firstname.validclass =alert alert-danger> < strong>需要名字< / strong> < / div> < / div> < div class =form-group> < label class =formHeading>姓氏< / label> < input type =textid =facebookclass =form-control col-xs-3ngControl =lastname＃lastname =ngForm> < / div> < div * ngIf =lastname.touched> < div * ngIf =！lastname.validclass =alert alert-danger> < strong>需要姓氏< / strong> < / div> < / div> < div class =form-group> < label class =formHeading>个人资料名称< / label> < input type =textid =facebookclass =form-control col-xs-3ngControl =profilename＃profilename =ngForm> < / div> < div class =form-group> < label class =formHeading>电话< / label> < input type =textid =facebookclass =form-control col-xs-3ngControl =phone＃phone =ngForm> < / div> < div * ngIf =phone.touched> < div * ngIf =！phone.validclass =alert alert-danger> < strong>需要电话号码< / strong> < / div> < / div> < label class =formHeading>图片< / label> < input type =filename =fileuploadngControl =phone> < div class =form-row btn> < button type =submitclass =btn btn-primary[disabled] =！form.valid>保存< / 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}; $ b @Component（{ templateUrl：'./components/profile/profile.html'，指令：[ROUTER_DIRECTIVES，FORM_DIRECTIVES]，}） 导出类个人资料{ http：http; 表格：ControlGroup; 构造函数（fbld：FormBuilder，http：Http，公共路由器：Router）{ this.http = http; this.form = fbld .group（{ firstname：[''，Validators.required]， lastname：[''，Validators.required]， profilename：[ ''，Validators.required]，图片：['']， 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'）; } }）} $ b $ / code> 解决方案只需在ts中导入以下语句： $ b 从'@ angular / forms'导入{FORM_DIRECTIVES，FormBuilder，Validators，REACTIVE_FORM_DIRECTIVES}; 指令：[CORE_DIRECTIVES，ROUTER_DIRECTIVES，FORM_DIRECTIVES，REACTIVE_FORM_DIRECTIVES]， 进行以下更改模板 < h3 class =head> MY PROFILE< / h3> < form [ngFormModel] =form（ngSubmit）=onSubmit（form.value）> < div class =row> < div class =form-group> < label class =formHeading>名字< / label> < input type =textid =facebookclass =form-control[formControl] =form.controls ['firstname']> < / div> < div * ngIf =firstname.touched> < div * ngIf =！firstname.validclass =alert alert-danger> < strong>需要名字< / strong> < / div> < / div> < div class =form-group> < label class =formHeading>姓氏< / label> < input type =textid =facebookclass =form-control col-xs-3[formControl] =form.controls ['lastname']> < / div> < div * ngIf =lastname.touched> < div * ngIf =！lastname.validclass =alert alert-danger> < strong>需要姓氏< / strong> < / div> < / div> < div class =form-group> < label class =formHeading>个人资料名称< / label> < input type =textid =facebookclass =form-control col-xs-3[formControl] =form.controls ['profilename']> < / div> < div class =form-group> < label class =formHeading>电话< / label> < input type =textid =facebookclass =form-control col-xs-3[formControl] =form.controls ['phone']> < / div> < div * ngIf =phone.touched> < div * ngIf =！phone.validclass =alert alert-danger> < strong>需要电话号码< / strong> < / div> < / div> < div class =form-row btn> < button type =submitclass =btn btn-primary[disabled] =！form.valid> Save< / button> < / div> 这在你的引导中，来自'@ angular / forms'的 import {provideForms，disableDeprecatedForms}; bootstrap（MyDemoApp，[ provideForms（）， disableDeprecatedForms（）]）; My error is,EXCEPTION: Error: Uncaught (in promise): Template parse errors:Can't bind to 'ngFormModel' since it isn't a known native property ("MY PROFILE][ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">"): a@3:7There is no directive with "exportAs" set to "ngForm" ("stname ]#firstname="ngForm" >"): a@9:85There is no directive with "exportAs" set to "ngForm" ("/label> ]#lastname="ngForm" >My template,<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 Component, import {Component} from '@angular/core'; import {Http, Response, Headers} from '@angular/http'; import {Observable} from 'rxjs/Observable'; import {Subject } from 'rxjs/Subject'; import { contentHeaders } from '../headers/headers'; import {FORM_DIRECTIVES} from '@angular/forms'; import { Router, ROUTER_DIRECTIVES } from '@angular/router'; import {Control,FormBuilder,ControlGroup,Validators} from '@angular/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'); } }) } } 解决方案 Just import the following statement in ts,import {FORM_DIRECTIVES, FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES} from '@angular/forms';directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],Make the following changes in templates,<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>Finally do this in your bootstrapping,import {provideForms, disableDeprecatedForms} from '@angular/forms';bootstrap(MyDemoApp, [provideForms(),disableDeprecatedForms()]); 这篇关于Angular 2：'ngFormModel'，因为它不是已知的本地属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..