Angular 2：'ngFormModel'，因为它不是已知的本地属性 [英] Angular 2: 'ngFormModel' since it isn't a known native property
问题描述
我的错误是，
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>
我的模板
< pre $ < 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:7
There is no directive with "exportAs" set to "ngForm" ("stname
]#firstname="ngForm" >
"): a@9:85
There 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'，因为它不是已知的本地属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
