将angular对象绑定到angular2中的模型驱动形式 [英] binding angular object to model-driven form in angular2
本文介绍了将angular对象绑定到angular2中的模型驱动形式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经在绑定类中创建了自定义控件(在组件类中),该控件将对象绑定到html中的form元素,但是consele中显示了一条错误消息,我无法解决,但实际上消息没有任何意义(formGroup是特殊键,为什么它试图绑定它?)这是我在开发人员控制台中使用chrome看到的图像:
I have created custom controls(in component class) with binding objects to form element in html, but there is an error message shown in consele that I couldnt solve, actually message makes no sense(formGroup is special key why it tries to bind it ?) here is the image that I see in developer console in chrome:
form.component.html:
form.component.html:
<div class="row">
<form class="from-horizontal" [formGroup]="form" formControlName="username" formControlName="email" (ngSubmit)="signup()">
<div class="form-group row">
<label for="username" class="control-label col-md-2">Name:</label>
<div class="col-md-6">
<input type="text" id="username" class="form-control" >
<div class="alert alert-danger"
*ngIf="!form.controls['username'].valid"
>
User name is required.
</div>
</div>
</div>
<div class="form-group row">
<label for="email" class="control-label col-md-2">Email:</label>
<div class="col-md-6">
<input type="email" id="email" class="form-control" >
</div>
<div class="alert alert-danger"
*ngIf="!from.controls['email'].valid"
></div>
</div>
<div class="form-group row">
<label for="" class="control-label col-md-2"></label>
<div class="col-md-6">
<input type="submit" class="btn btn-primary">
</div>
</div>
</form>
</div>
form.component.ts
form.component.ts
import { Component } from '@angular/core';
import {FormControl,FormGroup,Validators} from '@angular/forms';
@Component({
moduleId:module.id,
selector: 'post-message',
templateUrl: '../../templates/postmessage.component.html'
})
export class PostComponent {
form = new FormControl({
username:new FormControl('',Validators.required),
email:new FormControl('',Validators.required)
})
signup(){
console.log(this.form.value);
}
}
推荐答案
您需要添加
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule], // <<<===
...
})
到使用formGroup
这篇关于将angular对象绑定到angular2中的模型驱动形式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文