标签: angular2-forms

我有2个组件,一个'创建'组件和一个子'形式'组件.我需要表单组件来传递submit事件以及表单数据.

真正的问题是当我记录收到的事件时,我得到2,而不是一个事件/ arg.这是它记录的内容:Event {isTrusted: true}然后Contact {name: inputName}

如何过滤事件,以便仅在收到Contact对象时才执行操作？

父'创建'组件:

import {Component, OnInit } from 'angular2/core';
import {Contact} from './contact';
import {ContactFormComponent} from './contact-form.component';

@Component({
    selector: 'contact-create',
    template: `
      <h2>Nuevo contacto</h2>

      <div class="panel panel-default">
        <div class="panel-body">

          <contact-form [contact]="contact" (formSubmitted)="saveContact($event)"></contact-form>

        </div>
      </div>
    `,
    directives: [ContactFormComponent]
})
export class ContactCreateComponent {

  contact: Contact = new Contact('');

  constructor(
      private router: Router,
      private contactService: ContactService) { }

  saveContact(args) {
    console.log(args);
  }
}

儿童'形式'组件

import {Component, EventEmitter} from 'angular2/core';
import {NgForm}    from 'angular2/common'; …

我的表单是通过Enter键提交的.该值textarea的是空的,因为焦点仍然在textarea的.

有没有办法强制在textarea上模糊,还是有更优雅的方法？

所以在Angular2应用程序中我有一个名为'recipe.ingredients'的字符串数组,我有一个表单设置允许您编辑成分,添加和删除文本字段(和数组中的项目)的按钮.

    <ul class="list-unstyled">
      <div class="row" *ngFor="let ingredient of recipe.ingredients; let i=index">
        <li>
          <div class="col-xs-4">
            <input
              size="20"
              type="text"
              class="form-control"
              [ngModel]="recipe.ingredients[i]"
              #t
              (blur)="recipe.ingredients[i]=t.value"
              required>
          </div>
          <div class="btn-group col-xs-2" role="group">
            <button
              type="button"
              class="btn btn-default btn-xs"
              (click)="recipe.ingredients.splice(i,1)">-</button>
            <button
              type="button"
              class="btn btn-default btn-xs"
              (click)="recipe.ingredients.splice(i+1,0,'')">+</button>
          </div>
        </li>
      </div>
    </ul>

你会注意到我没有用[(ngModel)]双向绑定到recipe.ingredients [i],那是因为我试过了,每次你输入一个字符时,文本框都会失去焦点.我认为这与*ngFor踩过数组有关.无论如何,目前这种解决方法很好,但现在我添加了一些功能,我需要两种数据绑定才能工作.知道如何重构这个以使其工作吗？

我在Angular2 RC1中开发了一个SPA,但是由于最终版本已经发布,我的组织决定将代码移植到Angular 2 GA.虽然我可以修复大部分破碎的东西,但我真的在与表格斗争.
在我之前的RC1代码中,我使用了ControlGroup和Control以及FormBuilder.我正在使用它们来做通常的形式的东西,如验证,添加和删除控件等.但现在显然它们已被删除,我不知道是什么取代了它们.
我尝试了API指南FormControl或FormGroup中的一些其他类,但两者都没有真正帮助.我想知道上面两个班级的替代品是什么.

编辑: FormControl和FormGroup消除了TypeScript文件中的错误,但是,在标记中,我收到inline template:0:0 caused by: No provider for FormBuilder!错误.

更新:我可以使用FormGroup,FormControl和FormBuilder.通过将ReactiveFormsModule添加到app.module.ts文件来解决上述错误.但是,我得到一个错误inline template:30:61 caused by: this.form._updateTreeValidity is not a function.
模板中的特定行是
<form #userForm="ngForm" (ngSubmit)="submitUser()" [formGroup]="userForm" novalidate autocomplete="off">

有任何想法吗？

我有这个简单的代码:

<form #form="ngForm" (ngSubmit)="submit(form)">
   <fieldset ngModelGroup="cliente">
      // inputs with ngModel
   </fieldset>
   <fieldset ngModelGroup="enderecos">
      // inputs with ngModel
   </fieldset>
   <fieldset ngModelGroup="contatos">
      // inputs with ngModel
   </fieldset>
</form>

// My submit method
submit(form: NgForm) {
  if(form.valid) {
    // save
    // reset method
    form.reset();
  }
}

当我调用方法form.reset()时,Angular默认重置所有字段.

我的问题是:是否有机会仅重置像"contatos"或"enderecos"这样的特定ngModelGroup而不是所有表单输入？

谢谢你的建议.

我尝试基于其他字段验证表单字段值,所以我写了一个自定义验证器,当我试图获取其他字段时抛出错误我尝试了以下代码,请帮助我提前感谢

   export class CreatesessionComponent implements OnInit {

      eventform : FormGroup ;

     constructor(private formBuilder: FormBuilder) {

       }


      ngOnInit() {

       this.eventform = this.formBuilder.group({
          eventname : new FormControl(''[Validators.required,Validators.pattern('[A-Za-z]+')]), 
          userlive : new FormControl('',[Validators.required,this.maxuser]),
          totaluser :new FormControl('',[Validators.required,this.totaluser])

       });
      }

totaluser(control : FormGroup) : {[s:string ]: boolean} {
  console.log(control.controls['eventname'].value)
//  if(control.value > 20){
//    return { total : true };
//  }
return null;
}

在控制台中出错,因为无法读取'eventname'未定义的属性

我想了解输入文本框中下面提到的模板引用变量表示法之间的区别.

<input type="text" name='name' #name [(ngModel)]='model'>
<input type="text" name='name' ref-name [(ngModel)]='model'>

使用#name和ref- name有什么区别.
使用引用名称变量的范围是否会更改？
有人可以建议最佳做法和理由吗？

我正在进行表单验证。我正在使用模板驱动的验证表，其编码如下。它现在可以正常工作，但是当我尝试#username = "ngModel" and #password = "ngModel在输入中添加“以创建验证类时，这向我显示了错误。请也查找错误。

<div class="container">
  <div class="row">
    <div class="centering text-center">
      <div class="login-cont col-md-4 col-md-offset-4 vcenter">
        <form id="login_form" name="login-form" #f="ngForm"  role="form" (ngSubmit)="f.form.valid && login()" novalidate>

          <input id="username" [(ngModel)]="username"  name="username"  required  class="form-control"  type="text"   placeholder="Username" >
<input id="userPassword" class="form-control"  required type="password" name="userPassword" required placeholder="Password" [(ngModel)]="password" >
<button type="submit" class="btn login-btn">Login</button>
</form>
</div>
</div>
</div>
</div>

 Cannot assign to a reference or variable!
    at _AstToIrVisitor.visitPropertyWrite (webpack-internal:///../../../compiler/esm5/compiler.js:26226:23)
    at PropertyWrite.visit (webpack-internal:///../../../compiler/esm5/compiler.js:4803:24)
    at convertActionBinding (webpack-internal:///../../../compiler/esm5/compiler.js:25676:45)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:28166:22)
    at Array.forEach (<anonymous>) …

我已经检查了堆栈上的流程答案,但是它们似乎都没有相关性,我创建了两个组件page1和page2.并在module.ts中声明了一条路线

     import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Route, RouterModule} from '@angular/router'


import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';


@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path:'page1', component:Page1Component},
      {path:'page2', component:Page2Component}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的page1 html如下所示

<p>
  page1 works!

<button (click)= 'OnbtnClick()'>Route to Page2</button>
</p>

组件ts如下

import { Component, OnInit …

在login.component.ts中声明loginObj,如下所示

 public loginObj: Object = {
   email:'',
   password:''
 };
 public registerObj: Object = {
  email:'',
  name:'',
  password:''
 };

HTML

<input placeholder="" type="text"  [(ngModel)]="loginObj.email" autofocus="true" required>
<input placeholder="" type="text"  [(ngModel)]="loginObj.password" autofocus="true" required>