将角度对象绑定到 angular2 中的模型驱动形式 [英] binding angular object to model-driven form in angular2

查看：30
本文介绍了将角度对象绑定到 angular2 中的模型驱动形式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经创建了自定义控件(在组件类中)，并将对象绑定到 html 中的表单元素，但是在 consele 中显示了一条我无法解决的错误消息，实际上消息没有意义(formGroup 是它尝试绑定它?)这是我在 Chrome 开发者控制台中看到的图像:

form.component.html:

<form class="from-horizo​​ntal" [formGroup]="form" formControlName="username" formControlName="email" (ngSubmit)="signup()"><div class="form-group row"><label for="username" class="control-label col-md-2">名称:</label><div class="col-md-6"><input type="text" id="username" class="form-control" ><div class="alert alert-danger"*ngIf="!form.controls['username'].valid">用户名是必需的.

<div class="form-group row"><label for="email" class="control-label col-md-2">电子邮件:</label><div class="col-md-6"><input type="email" id="email" class="form-control" >

<div class="alert alert-danger"*ngIf="!from.controls['email'].valid"></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">

</表单>

form.component.ts

import { Component } from '@angular/core';从@angular/forms"导入 {FormControl,FormGroup,Validators}；@成分({moduleId:module.id,选择器:'post-message',templateUrl: '../../templates/postmessage.component.html'})导出类 PostComponent {表单 = 新表单控件({用户名:new FormControl('',Validators.required),电子邮件:新 FormControl('',Validators.required)})报名(){console.log(this.form.value);}}

解决方案

需要添加

 @NgModule({进口:[BrowserModule, FormsModule, ReactiveFormsModule],//<<<===...})

到您使用formGroup

的模块

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:

<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

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);
    }
 }

解决方案

You need to add 

 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule], // <<<===
   ...
 })

to the module where you are using formGroup

这篇关于将角度对象绑定到 angular2 中的模型驱动形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆