如何使用Angular 2从生成的TextField中获取JSON对象

Question

我正在尝试使用Angular 2动态添加Textfield，并且可以按预期工作，但无法设法获得此JSON对象：我想在提交按钮时要获得的JSON对象的典范：

{fullname：" toto"，etapes：[{etape：" woryext"}，{etape：" wory ext"}]}

HERES 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

如果需要：

{fullname：" toto"，etapes：[{etape：" woryext"}，{etape：" wory ext"}]}

您的表格应该看起来像：（我们不需要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());
}

nb：您不再需要（单击）=" save（）"在"提交"按钮中，因为您在提交时已经调用它。

工作plunker：http：//plnkr.co/edit/nq4jrc5g0tfxe0nctfoq?p=preview

Answer 2

嗨，你能像这样尝试

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

Answer 3

@imsi imsi你有

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