标签: angular2-forms

这些文档陈述如下:

如果emitEvent为true,则此更改将导致FormControl上的valueChanges事件被发出.默认为true(因为它落到updateValueAndValidity).

这是什么updateValueAndValidity？

基本上,我有

<form #f="ngForm" (ngSubmit)="save(f.form)" #formElement>
    ...
    <button class="btn btn-primary" #saveButton>Save</button>
</form>

我希望能够submit()从组件中触发.我试过@viewChild('formElement')并renderer.invokeElementMethod触发click().

有没有办法制作双向绑定输入组件,也可以在组件内部进行验证？

我想要实现的是有一个组件,我可以在我的表单中排列如下:

<form #f="ngForm">
            <my-form-input [(inputModel)]="name" [inputField]="myFormInputName"></my-form-input>
            <my-form-input [(inputModel)]="name2" [inputField]="myFormInputName2"></my-form-input>
...
            <my-form-input [(inputModel)]="lastItem" [inputField]="lastItemName"></my-form-input>

</form>

我有以下设置,无法弄清楚,如何使其正确:

组件:

import {Component,Input, Output,EventEmitter} from 'angular2/core'
import {FORM_DIRECTIVES}    from 'angular2/common';

@Component({
  selector: 'my-form-input',
  directives: [FORM_DIRECTIVES],
  template:
    `
    <input type="text" class="form-control"  id="i1" required [ngModel]="inputModel" (ngModelChange)="onChangeInput($event)" ngControl="ctrl" #ctrl="ngForm"/>
    <p>{{"Is field valid? I would like to make some decisions here depending on that: "+ctrl.valid}}</p>

  `
})
export class InputComponent {

  constructor(){};

  @Input()  inputField:string;
  @Input()  inputModel: Object;
  @Output() inputModelChange = new EventEmitter();

  onChangeInput(event){
    this.inputModel=event;
    this.inputModelChange.emit(event);
  }
}

该应用程序: …

如何在beta 6中实现单选按钮绑定？

我发现了beta 0的一个很好的plnkr(请参阅http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview),但是当我尝试将其更新为beta 6时,它会发生可怕的破坏(请参阅http://plnkr.co/编辑/ voU933？p =预览).

我看了一下添加内置支持无线电选项的提交(参见https://github.com/angular/angular/commit/e725542),它给出了这个例子

@Component({
  template: `
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  `
})
class FoodCmp {
  foodChicken = new RadioButtonState(true, "chicken");
  foodFish = new RadioButtonState(false, "fish");
}

但到目前为止,我尝试做这项工作的结果与失败的plnkr相似.

基本上我想用嵌套对象创建一个动态表单,如下图所示:

• 付款是在模型上的阵列中
• 我们应该能够根据需要添加/取消支付.
• 表单应同步底层表单控件和模型
• 支付的数量是任意的,应该从模型中加载到表单中

在Angular 2中我没有找到如何做到这一点的工作示例,尽管在Angular 1中这很容易做到.

以下是我原来的问题,我已经更新了它以便澄清(见上文):

首先,我只是想指出,我知道几天前刚刚发布了新版本的Angular 2 rc.2.因此,创建动态嵌套表单的代码可能已经改变了一些,但是没有足够的文档可以解决这个问题.

在Angular 2的最新版本中(我目前正在使用rc.1但计划更新到rc.2)我需要创建一个这样的表单(伪代码视图):

<form [ngFormModel]="form" (ngSubmit)="onSubmit()">
  <input type="text" ngControl="name">

  <div *ngFor="let expense for expenses; let i = index;" control-group="expenses">
    <input type="text" ngControl="expense.amount" [(ngModel)]="myModel.expenses[i].amount"> 
    <input type="checkbox" ngControl="expense.final" [(ngModel)]="myModel.expenses[i].final"> 
  </div>

  <a class="button" (click)="addExpenseControl()">Add</a>
  <a class="button" (click)="deleteExpenseControl()">Delete</a>
</form>

所以上面的伪代码不起作用,但说实话,因为缺乏文档,我无法弄清楚如何连接这样的东西.有一些关于嵌套ControlGroup的教程,但由于我们需要能够动态添加和删除控制组,所以这不适合这种情况,而且我还需要能够将它们与模型同步.

我发现这个plunkr在这里由Angular团队提供,它允许向表单添加控件 - 但这不是添加/删除ControlGroup,而是使用ControlArray,我不确定这是否适用于此？

我非常熟悉使用较新的基于模型的Angular 2表单,但是我正在掌握资源以便正确地嵌套它们(动态!),并将这些嵌套数据绑定到主表单模型中.我如何在视图中引用嵌套控件？上面的伪代码是否接近？我会从我的控制器发布代码,但说实话,我不知道上面的嵌套费用(ControlGroup ??)从哪里开始......

遇到一个非常奇怪的问题,我的应用程序在一个非常具体的用户案例中行为不端.我有一个门户网站,用户可以在其中添加问题和答案,然后进行编辑.在这种情况下,当我删除一个集合(q + a)然后尝试添加它时,模型会更新,但我的视图从占位符获取值并更新自身.在这里,我只是拼接并推送数组中的值并使用ngFor进行渲染.最后一个元素是一个虚拟元素,用于输入向上推的值.

如果有任何意义,请附上屏幕截图.

您可以看到,对于文本框,ng-reflect-model显示正确的问题,但元素本身显示占位符文本.

我想在FormContol动态上添加验证器(不是在初始化时)并且它不起作用....

代码:

this.formGroup.controls["firstName"].validator = Validators.Required;

有没有人这样做？

我有一个选择控件,我想根据条件动态禁用:

this.activityForm = this.formBuilder.group({
  docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required]
});

但是,即使在某些时候this.activeCategory变为"document",docType也不会启用.

我该如何解决？

无法以与Angular文档相同的方式访问它,因此必须首先获取FormGroup实例并在那里找到FormControl实例.我想知道为什么？这个例子有效:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

虽然这会引发错误(仅在*ngIf语句中这些差异):

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

无法读取未定义的属性"无效"

form.component:

import {Component} from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'sign-up',
  templateUrl: 'app/sign-up.component.html'
})

export class SignUpComponent {

  myForm = new FormGroup({
    username: new FormControl('username', Validators.required),
    password: new FormControl('', Validators.required), …

我以下面的形式创建了这个字段:

<mat-form-field class="example-full-width">
  <mat-input-container floatPlaceholder="auto" flex="100">
    <input matInput [(ngModel)]="evento.email" name="email" type="email" placeholder="Email para Contatos" email required [errorStateMatcher]="formMatcher">
  </mat-input-container>
  <mat-hint>Este será o endereço de e-mail oficial do evento.</mat-hint>
  <mat-error *ngIf="formControl.hasError('email') && !formControl.hasError('required')">
    Por favor insira um e-mail com formato válido.
  </mat-error>
  <mat-error *ngIf="formControl.hasError('required')">
    Este campo é <strong>obrigatório.</strong> Não esqueça de preenchê-lo.
  </mat-error>
</mat-form-field>

如果我使用mat-form-field并mat-input-container同时在输入框上方获得2个重复标签和2行.

我只能使用其中一个,但我应该使用哪个？要做出这个决定,我需要知道什么时候最好使用每一个.有人可以帮忙解释一下吗？我在http://material.angular.io中找不到它