如何使用 angular 2 从生成的文本字段中获取 json 对象

Question

我正在尝试使用 angular 2 动态添加文本字段并且它按预期工作，但无法设法获得此 json 对象：当我点击提交按钮时我想得到的 json 对象的例子：

{fullname:"toto",etapes:[{etape:"sometext"},{etape:"sometext"}]}

这里是 HTML 代码：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
<div style="padding:15px" class="container" style="width: 1027px !important;">
    <div class="itineraire">
        <div class="panel panel-default" style="width:100%">
            <div class="panel-heading panelcolor"><span style="font-size: 15px;font-weight: bold">Itinéraire</span></div>
            <div class="panel-body panelcolor">

                 <input type="text"  formControlName="fullname" class="form-control" placeholder="fullename"
                                        name="Location"  >

                <div formArrayName="myArray">
                    <div *ngFor="let myGroup of myForm.controls.myArray.controls; let i=index">
                        <div [formGroupName]="i">
                            <span *ngIf="myForm.controls.myArray.controls.length > 1" (click)="removeDataKey(i)" class="glyphicon glyphicon-remove pull-right"
                                style="z-index:33;cursor: pointer">
                            </span>
                            <!--[formGroupName]="myGroupName[i]"-->
                            <div [formGroupName]="myGroupName[i]">

                                <div class="inner-addon left-addon ">
                                    <i class="glyphicon  marker" style="border: 5px solid #FED141"></i>
                                    <input type="text" style="width:50% !important" formControlName="etape" class="form-control" placeholder="Exemple : Maarif, Grand Casablanca"
                                        name="Location"  (setAddress)="getAddressOnChange($event,LocationCtrl)"><br/>
                                </div>

                            </div>
                            <!--[formGroupName]="myGroupName[i]"-->

                        </div>
                        <!--[formGroupName]="i" -->
                    </div>

                </div>
                <br/>
                <a (click)="addArray()" style="cursor: pointer">+ Ajouter une ville étape</a>
                <input type="text" style="width:30%" #newName id="newName" [hidden]="true">

            </div>
        </div>
        <button type="submit" (click)="save()">save</button>
       </form>

Component.ts :

initArray(nameObj:any) {
  return  this._fb.group({  
            [nameObj]: this._fb.group({

                      etape: [''],
                 gmtDate:[''],


                })
            });
}

  addArray(newName:string) {
    const control = <FormArray>this.myForm.controls['myArray'];
    this.myGroupName.push(newName);
    control.push(this.initArray(newName));

}

  ngOnInit() {
    this.myForm = this._fb.group({

        myArray: this._fb.array([
           this._fb.group({  
               test: this._fb.group({

                        etape: [''],
                         gmtDate:['']
                })
            }), 

        ])
    });

}
  save(){
     console.log(myObject);
  }

所以，当我点击提交按钮时，我必须在我的代码中做哪些更改才能获得上面的 Json 对象，请帮助我解决这个问题。

Answer 1

嗨，你可以这样试试吗

save(){
 console.log(this.myForm.value);
}

Answer 2

如果你想：

{fullname:"toto",etapes:[{etape:"sometext"},{etape:"sometext"}]}

您的表单应该如下所示：（我们不需要 formGroupName ）

this.myForm = this._fb.group({
    fullname: ['', Validators.required ],
    etapes: this._fb.array([
                this._fb.group({
                    etape: ['']
                },
                this._fb.group({
                    etape: ['']
                },
                ...
            )
        ])
  });

所以，要动态地拥有它，您的 initArray() 应该是这样的：

initArray() {
    return  this._fb.group({
                 etape: ['']
          });
}

添加数组应该如下所示：

addArray(newName:string) {
    const control = <FormArray>this.myForm.controls['etapes']
    control.push(this.initArray());
}

注意：您不再需要提交按钮中的 (click)="save()"，因为您在提交时已经调用了它。

一个工作的 plunker：http://plnkr.co/edit/Nq4jrC5g0tfxE0NCTfoQ?p=preview

Answer 3

@imsi imsi 你有

  <div [formGroupName]="myGroupName[i]"> //WRONG
  <div [formGroupName]="myGroup[i]">  //<--it's myGroup

如何使用 angular 2 从生成的文本字段中获取 json 对象

how to get json object from genereted textfield using angular 2

javascript

angular2-template

angular