Angular2:使用模型驱动的表单添加并提交新的表单组名称和值 [英] Angular2: add and submit a new formGroup name and values with model driven form

问题描述

通过输入字段添加到 FormArray

要通过表单输入向现有数组添加值，我可以在 html 中使用 (click)="addAddress()"，其中 addAddress 在 component.ts 中定义以更新表单 AppComponent 中数组中的值:

ngOnInit() {this.myForm = this._fb.group({名称:['', [Validators.required, Validators.minLength(5)]],地址:this._fb.array([this.initAddress(),])});}initAddress() {返回 this._fb.group({街道:[''，Validators.required]，邮政编码: ['']});}添加地址(){const control = <FormArray>this.myForm.controls['addresses'];control.push(this.initAddress());}

回到 html ngFor 用于在每次单击添加"按钮时添加一组输入字段":

<div *ngFor="let address of myForm.controls.addresses.controls; let i=index" ><span>地址{{i + 1}}</span><div [formGroupName]="i"><input type="text" formControlName="street"><input type="text" formControlName="postcode">

喜欢这里的完整工作示例:https://embed.plnkr.co/sUjE1ULYhfDHLNBw2sRv/1

通过输入字段添加到表单 FormGroup

我想了解如何通过表单输入添加一个全新的 FormGroup.所以以上面的例子为例......

而不是添加到地址数组:

<代码>{姓名": ""，地址":[{"street": "贝克街",邮政编码":w2"},{"street": "邦德街",邮政编码":w1"}]}

每次添加地址时，都会创建一个新的 FormGroup，用户可以在其中通过表单输入为每个地址添加 FormGroupName.例如:

<代码>{姓名":""，家":{"street":"贝克街",邮政编码":w2"},工作":{"street":"邦德街",邮政编码":w1"}}

解决方案

使用 addControl 方法可以这样实现:

app.component.html 摘录:

 
<a (click)="addGroup(newName.value)" style="cursor: default">添加组+</a>

app.component.ts 摘录:

ngOnInit() {this.myForm = this._fb.group({});}添加组(新名称:字符串){让数据 = this._fb.group({foo: ['多多的 foo'],酒吧:['酒吧见']})this.myForm.addControl(newName, data);document.getElementById('newName').value='';}

此 plunk 中的工作示例:

例如，为添加到新命名组中的每个 formControl 发布相应的输入字段，我创建了这个 plunk

Adding to a FormArray via input field

To add values, via a form input, to an existing array I can use (click)="addAddress()" in the html where addAddress is defined in the component.ts to update values in an array in the form AppComponent:

ngOnInit() {
        this.myForm = this._fb.group({
            name: ['', [Validators.required, Validators.minLength(5)]],
            addresses: this._fb.array([
                this.initAddress(),
            ])
        });
    }

    initAddress() {
        return this._fb.group({
            street: ['', Validators.required],
            postcode: ['']
        });
    }

    addAddress() {
        const control = <FormArray>this.myForm.controls['addresses'];
        control.push(this.initAddress());
    }

And back in the html ngFor is used to add a set of input fields each time the 'add' button is clicked":

<div formArrayName="addresses">
          <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" >
              <span>Address {{i + 1}}</span>
            <div [formGroupName]="i">
                <input type="text" formControlName="street">
                <input type="text" formControlName="postcode">
            </div>
          </div>
        </div>

Like the full working example here: https://embed.plnkr.co/sUjE1ULYhfDHLNBw2sRv/1

Adding to form FormGroup via input field

I would like to understand how to add a completely new FormGroup via form input. So taking the case of the example above...

Rather than adding to an array of addresses:

{
  "name": "",
  "addresses": [
    {
      "street": "Baker Street",
      "postcode": "w2"
    },
    {
      "street": "Bond Street",
      "postcode": "w1"
    }
  ]
}

Each time an address is added a new FormGroup is created where the user adds the FormGroupName for each via form input. For example:

{  
   "name":"",
   "home":{  
      "street":"Baker Street",
      "postcode":"w2"
   },
   "work":{  
      "street":"Bond Street",
      "postcode":"w1"
   }
}

解决方案

Using the addControl method this can be achieved like so:

app.component.html excerpt:

        <div class="margin-20">
            <a (click)="addGroup(newName.value)" style="cursor: default">Add Group +</a>
          </div>

app.component.ts excerpt:

ngOnInit() {

        this.myForm = this._fb.group({    
        });
    }


 addGroup(newName:string) {

         let data = this._fb.group({
                     foo: ['what a load of foo'],
                     bar: ['see you at the bar']

                    })

        this.myForm.addControl(newName, data);
        document.getElementById('newName').value='';


    }

Working example in this plunk:

For an example where a corresponding input field is published for each formControl that is added in the new named group I created this plunk

这篇关于Angular2:使用模型驱动的表单添加并提交新的表单组名称和值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！