标签: angular2-forms

我有一些简单的角度2组件与模板.提交后如何清除表格和所有字段？我无法重新加载页面.用date.setValue('')字段设置数据后是stil touched.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';

@Component({
    selector: 'loading-form',
    templateUrl: 'app/loadings/loading-form.component.html',
    directives: [FORM_DIRECTIVES]
})

export class LoadingFormComponent {
    private form:ControlGroup;
    private date:Control;
    private capacity:Control;

    constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
        this.date = new Control('', Validators.required);
        this.capacity = new Control('', Validators.required);
        this.form = fb.group({
            'date': this.date,
            'capacity': this.capacity
        });
    }

    onSubmit(value:any):void {
        //send some data to backend
    }
}

装载-form.component.html

<div class="card card-block">
    <h3 class="card-title">Loading form</h3>

    <form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
        <fieldset class="form-group" [class.has-danger]="!date.valid …

我在formbuilder中有一个表单数组,我正在动态更改表单,即从应用程序1等单击加载数据.

我遇到的问题是所有数据都加载但是formarray中的数据保持不变,只是用旧的方式将旧项目连接起来.

如何清除formarray只有新项目.

我试过这个

const control2 = <FormArray>this.registerForm.controls['other_Partners'];
        control2.setValue([]);

但它不起作用.

有任何想法吗？谢谢

在nginit

ngOnInit(): void {
this.route.params.subscribe(params => { alert(params['id']);
            if (params['id']) {
                this.id = Number.parseInt(params['id']);
            }
            else { this.id = null;}
          });
if (this.id != null && this.id != NaN) {
            alert(this.id);
            this.editApplication();
            this.getApplication(this.id);
        }
        else
        {
            this.newApplication();
        }

}

onSelect(Editedapplication: Application) {
 this.router.navigate(['/apply', Editedapplication.id]);
}

editApplication() {
      
        this.registerForm = this.formBuilder.group({
              id: null,
            type_of_proposal: ['', Validators.required],
            title: ['', [Validators.required, Validators.minLength(5)]],
            lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
            description: ['', [Validators.required, Validators.minLength(5)]],
            status: '', …

我知道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);
        }
    }
}

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

<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或其他......)时,它不会工作.

这只是模板驱动表单中的一个问题

这是plunker:

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 | …

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

我在组件中设置了一组颜色,我成功绑定到下拉列表.我遇到的问题是在页面init上预先选择一个值.

该行[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设置select的开始值

将选择元素绑定到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(): …

我的问题很简单:我有一个像这样的复选框列表:

<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的一部分.

谢谢你的帮助!

我只是在学习angular2.在输入更改时应用某些内容时,我收到错误.

app.ts:

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

 }

错误:

怎么解决这个？我错过了什么吗？

Plunker演示

NB我现在无法在plunker上制作任何东西,因为我第一次在plunker上写了angular2.我在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>

但是,当我尝试使用webform执行相同的操作时:

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

使用(更改)方法:

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: …

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

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(): …