尝试建立表单，但由于某种原因，尽管使用[[ngModel）]，但我的html中的Date输入未绑定到对象的日期值

的HTML：

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

表单组件：

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

用户类别：

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

测试输出显示当前的“新”日期作为对象的值，但是输入不会更新User对象的日期值或反映该值，表明双向绑定都不起作用。 帮助将不胜感激。

我想创建一个表单，用户可以在其中输入他的电子邮件。 我想验证客户端的电子邮件格式。

Angular 2中是否有任何通用的电子邮件验证程序？

注意：类似于AngularJS验证程序。

我无法找出如何将所有表单字段都标记为已触摸。主要问题是，如果我不触摸字段并尝试提交表单-验证错误未显示。 我的控制器中有这段代码的占位符。
我的想法很简单：

1. 用户点击提交按钮
2. 所有字段都标记为已触摸
3. 错误格式化程序重新运行并显示验证错误

如果有人有其他想法如何在提交时显示错误而不执行新方法-请与他人分享。 谢谢！

我的简化形式：

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
  <input type="text" id="title" class="form-control" formControlName="title">
  <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span>
  <button>Submit</button>
</form>

而我的控制器：

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

@Component({
  selector   : 'pastebin-root',
  templateUrl: './app.component.html',
  styleUrls  : ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  formErrors = {
    'title': ''
  };
  validationMessages = {
    'title': {
      'required': 'Title is required.'
    }
  };

  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.buildForm();
  }

  onSubmit(form: any): void {
    // somehow touch all elements so onValueChanged will generate correct error messages

    this.onValueChanged();
    if (this.form.valid) {
      console.log(form);
    }
  }

  buildForm(): void {
    this.form = this.fb.group({
      'title': ['', Validators.required]
    });
    this.form.valueChanges
      .subscribe(data => this.onValueChanged(data));
  }

  onValueChanged(data?: any) {
    if (!this.form) {
      return;
    }
    const form = this.form;
    for (const field in this.formErrors) {
      if (!this.formErrors.hasOwnProperty(field)) {
        continue;
      }

      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.touched && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          if (!control.errors.hasOwnProperty(key)) {
            continue;
          }
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }
}

使用Angular 2，在模板驱动的形式中，双向绑定很容易-只需使用香蕉盒语法即可。 您将如何以模型驱动的形式复制此行为？

例如，这是标准的反应形式。 让我们假设它比看起来要复杂得多，具有许多不同的输入和业务逻辑，因此比模板驱动的方法更适合模型驱动的方法。

export class ExampleModel {
    public name: string;
    // ... lots of other inputs
}

@Component({
    template: `
        <form [formGroup]="form">
            <input type="text" formControlName="name">
            ... lots of other inputs
        </form>

        <h4>Example values: {{example | json}}</h4>
    `
})
export class ExampleComponent {
    public form: FormGroup;
    public example: ExampleModel = new ExampleModel();

    constructor(private _fb: FormBuilder) {
        this.form = this._fb.group({
            name: [ this.example.name, Validators.required ]
            // lots of other inputs
        });
    }

    this.form.valueChanges.subscribe({
        form => {
            console.info('form values', form);
        }
    });
}

在subscribe()中，我可以将各种逻辑应用于表单值并根据需要映射它们。 但是，我不想映射表单中的每个输入值。 我只想查看整个employee模型更新时的值，采用类似于[(ngModel)]="example.name"的方法，并显示在模板的json管道中。 我该怎么做？

我只是在学习angular2。 在输入更改中应用某些内容时，出现了错误。

应用程式：

export class AppComponent {
    form: ControlGroup;

    constructor(fb: FormBuilder) {
        this.form = fb.group({
            search: []
        });

        var search = this.form.find('search');
        search.valueChanges
            .debounceTime(400)
            .map(str => (<string>str).replace(' ','‐'))
            .subscribe(x => console.log(x));
    };

 }

错误：

如何解决呢？ 我想念什么吗？

柱塞演示

N.B. 现在我第一次在plunker上编写angular2，所以我无法在plunker上产生任何东西。 我在plunker只写了我的app.ts代码。 我已经显示了本地计算机上的错误屏幕截图。 如果您告诉我如何在plunker中运行angular2项目，我也将不胜感激。

实际上，我正在使用带有Angular 2编码的接口的Spring REST API。

我的问题是我无法使用Angular 2上传文件。

我在Java中的Webresources是：

@RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam MultipartFile file) {
    //Dosomething 
}

当我通过带有Auth标头等的URL请求调用它时，它是完美的工作方式...  （带有适用于Chrome的Advanced Rest Client扩展）

证明：（在这种情况下，一切正常）

我添加了

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

Spring配置文件和Pom依赖

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2</version>
</dependency>

但是，当我尝试使用网络表单执行相同的操作时：

<input type="file" #files (change)="change(files)"/>
<pre>{{fileContents$|async}}</pre>

使用（change）方法：

change(file) {
    let formData = new FormData();
    formData.append("file", file);
    console.log(formData);
    let headers = new Headers({
        'Authorization': 'Bearer ' + this.token,
        'Content-Type': 'multipart/form-data'
    });
    this.http.post(this.url, formData, {headers}).map(res => res.json()).subscribe((data) => console.log(data));
    /*
    Observable.fromPromise(fetch(this.url,
        {method: 'post', body: formData},
        {headers: this.headers}
    )).subscribe(()=>console.log('done'));
    */
}

我的Web服务向我返回错误500，并在tomcat日志中显示该错误：[http://pastebin.com/PGdcFUQb]

我也尝试了'Content-Type': undefined方法，但没有成功（在这种情况下，Web服务向我返回415错误。

有人可以帮助我找出问题所在吗？

问题已解决，我将在稍后用我的代码更新该问题:)，但是，请看一下它工作得很好的插件。谢谢。

我在Angular 2的下拉列表中预先选择值时遇到问题。

我在成功绑定到下拉列表的组件中设置了颜色数组。 我遇到的问题是在页面初始化中预先选择一个值。

行[selected]="car.color.id == x.id"应该选择已在汽车模型上设置的值this.car.color = new Colour(-1,'');，但是仅当我将汽车颜色ID设置为列表中的最后一项（在这种情况下为黑色）时，此方法才有效this.car.color = new Colour(4,'');

我正在使用最新版本的Angular（rc3），并且在rc1和rc2中遇到了相同的问题。

这是一个显示问题的工具。

[https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview]

另一个奇怪的方面是，当查看元数据时，Angular已将所选值设置为true。

但是下拉列表仍然显示为空。

这似乎是与这些相关问题分开的问题。

Angular 2设置选择的开始值

在Angular 2中将选择元素绑定到对象

如何在Angular2中的对象数组上使用select / option / NgFor

问候

史蒂夫

组件模板

   <div>
        <label>Colour</label>
        <div>
            <select [(ngModel)]="car.colour"">
                <option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option>
            </select>
        </div>
    </div>

零件

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car = new Car();
    colours = Array<Colour>();

    ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));
        this.colours.push(new Colour(3, 'Orange'));
        this.colours.push(new Colour(4, 'Black'));

        this.car = new Car();
        this.car.color = new Colour(-1,'');        
    }
}

export class Car
{
    color:Colour;
}

export class Colour
{
    constructor(id:number, name:string) {
        this.id=id;
        this.name=name;
    }

    id:number;
    name:string;
}

我的问题真的很简单：我有以下复选框列表：

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

我想发送一组选定的选项，例如：[option1, option5, option8]（如果选择了选项1、5和8）。 该数组是我想通过HTTP PUT请求发送的JSON的一部分。

谢谢你的帮助！

我有使用模板驱动的蓝图的表单，所以像这样：

<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
  <input #name="ngModel" [(ngModel)]="name">
  <button type="submit">Submit form</button>
</form>

现在，如何防止ENTER提交表单？ 它会干扰表单内部的自定义ENTER行为，并且还会干扰您在输入中无意按Enter的情况，这是不希望的。

我环顾四周，找到了一些旧的Angular 1答案和一些标准的JavaScript答案，但是我觉得Angular 2必须已经内置了类似的东西，但我找不到。

如果没有，实现此目标的最佳方法是什么？

这简直是疯狂，看起来没有办法让其中一种输入形式存在于子组件中。

我已经阅读了所有博客和教程以及所有内容，没有办法解决。

问题是，当子组件将具有任何形式的形式指令（ngModel，ngModelGroup或任何其他..）时，它将无法工作。

这只是模板驱动形式中的一个问题

这是个笨蛋：

import { Component } from '@angular/core';

@Component({
  selector: 'child-form-component',
  template: ` 
  <fieldset ngModelGroup="address">
    <div>
      <label>Street:</label>
      <input type="text" name="street" ngModel>
    </div>
    <div>
      <label>Zip:</label>
      <input type="text" name="zip" ngModel>
    </div>
    <div>
      <label>City:</label>
      <input type="text" name="city" ngModel>
    </div>
  </fieldset>`
})

export class childFormComponent{


}

@Component({
  selector: 'form-component',
  directives:[childFormComponent],
  template: `
    <form #form="ngForm" (ngSubmit)="submit(form.value)">
      <fieldset ngModelGroup="name">
        <div>
          <label>Firstname:</label>
          <input type="text" name="firstname" ngModel>
        </div>
        <div>
          <label>Lastname:</label>
          <input type="text" name="lastname" ngModel>
        </div>
      </fieldset>

      <child-form-component></child-form-component>

      <button type="submit">Submit</button>
    </form>

    <pre>
      {{form.value | json}}
    </pre>

    <h4>Submitted</h4>
    <pre>    
      {{value | json }}
    </pre>
  `
})
export class FormComponent {

  value: any;

  submit(form) {
    this.value = form; 
  }
}

我知道Angular 2当前缺乏一种将表单轻松重置为原始状态的方法。 随便看看，我发现了下面的解决方案，它重置了表单字段。

有人建议我需要删除控件组并创建一个新控件组以将其重建为原始格式。 我很难找出最好的方法来做到这一点。 我知道我需要将表单构建包装在一个函数中，但是在构造函数中执行此操作时会遇到错误。

重建控制组以完全重置表格的最佳方法是什么？

class App {

    name: Control;
    username: Control;
    email: Control;

    form: ControlGroup;

    constructor(private builder: FormBuilder) {

        this.name = new Control('', Validators.required);
        this.email = new Control('', Validators.required);
        this.username = new Control('', Validators.required);

        this.form = builder.group({
            name: this.name,
            email: this.email,
            username: this.username
        });
    }

    onSubmit(value: any): void {  
        // code that happens when form is submitted
        // then reset the form
        this.reset();
    }

    reset() {
        for (let name in this.form.controls) {
            this.form.controls[name].updateValue('');
            this.form.controls[name].setErrors(null);
        }
    }
}

我有这个枚举（我正在使用TypeScript）：

export enum CountryCodeEnum {
    France = 1,
    Belgium = 2
}

我想在我的表单中构建一个select，对于每个选项，将枚举整数值作为value，并将枚举文本作为label，如下所示：

<select>
     <option value="1">France</option>
     <option value="2">Belgium</option>
</select>

我怎样才能做到这一点 ？

我知道在angular2中我可以禁用一个按钮[ngStyle]属性，例如：

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

但是我可以使用[ngStyle]或[ngStyle]吗？ 像这样：

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>

谢谢。

我一直在阅读Angular2新的Forms API，似乎表单上有两种方法，一种是模板驱动形式，另一种是反应式或模型驱动型。

我想知道两者之间的实际差异，不是语法上的差异（显然），而是实际用途，哪种方法在不同情况下有更多好处。另外，选择其中一个是否有性能提升？ 如果是，为什么？

我正在处理登录表单，如果用户输入无效凭据，我们要将电子邮件和密码字段都标记为无效，并显示一条消息，指出登录失败。 如何从可观察的回调中将这些字段设置为无效？

模板：

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

登录方式：

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => {
      alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`);
    }, error => {
      this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue.
      this.loginForm.controls.email.invalid = true;
      this.loginForm.controls.password.invalid = true; 
    });
  }

除了将输入无效标志设置为true之外，我还尝试将email.valid标志设置为false，并将loginForm.invalid设置为true。 这些都不会导致输入显示其无效状态。

我似乎无法修复此错误。 我有一个搜索栏和一个ngFor。 我试图使用这样的自定义管道过滤数组：

import { Pipe, PipeTransform } from '@angular/core';

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

用法：

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

错误：

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

角度版本：

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

拥有此项目依赖项：

  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "ng2-bootstrap": "^1.1.1",
    "reflect-metadata": "^0.1.8",
    "core-js": "^2.4.0",
    "es6-module-loader": "^0.17.8",
    "rxjs": "5.0.0-beta.11",
    "systemjs": "0.19.27",
    "zone.js": "0.6.17",
    "jquery": "3.0.0",
  }

这个登录模板：

<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>

而这个登录组件：

import { Component } from '@angular/core';
import {Http, Headers}  from '@angular/http';
@Component({
    moduleId: module.id,
    selector: 'login-cmp',
    templateUrl: 'login.component.html'
})
export class LoginComponent {
  constructor($http: Http) {
    this.$http = $http;
  }
  authenticate(data) {
   ... 
  }
}

我有这个错误：

zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:    
There is no directive with "exportAs" set to "ngForm" ("
            <form [ERROR ->]#loginForm="ngForm" 
(ngsubmit)="authenticate(loginForm.value)">

我在RC4上，我收到错误由于我的模板，没有指令“exportAs”设置为“ngForm”：

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

boot.ts：

import {disableDeprecatedForms, provideForms} from '@angular/forms'; 

 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS, Http} from '@angular/http';
 import {provideRouter} from '@angular/router';

import {APP_ROUTER_PROVIDER} from './routes';

import {AppComponent} from './app.component';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

///所以这是我的DropdownList：

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

//我的组件ts：

我用这样的旧形式代表它：

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

现在我这样做：

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

你认为这是问题的原因??

情况：

请帮忙！ 我试图在我的Angular2应用程序中制作一个非常简单的形式，但不管它从不起作用。

角度版本：

Angular 2.0.0 Rc5

错误：

Can't bind to 'formGroup' since it isn't a known property of 'form'

代码：

风景：

<form [formGroup]="newTaskForm" (submit)="createNewTask()">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" required>
    </div>

     <button type="submit" class="btn btn-default">Submit</button>

</form>

控制器：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})


export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    }

}

ngModule：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'


@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})


export class AppModule { }

问题：

为什么我会收到这个错误？

我错过了什么吗？