Question

我想在我的项目中使用Angular反应形式，以获得一个复杂的json对象，我将解释我的问题：我有这个JSON对象：

项目= {＆＃34;出发＆＃34;：＆＃34;纽约＆＃34;，＆＃34;到达＆＃34;：＆＃34;加州＆＃34;，＆＃34;电台＆＃34 ;：[{＆＃34;台＆＃34;：＆＃34; TOTO＆＃34;}，{＆＃34;台＆＃34;：＆＃34;蒂蒂＆＃34;}，{＆＃34;台＆＃ 34;：＆＃34;塔塔＆＃34;}]}

我设法使用此代码获取此User Interface：

 <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">

 <div *ngIf="items?.departure">
    <span>{{items.departure}}</span> --> 
    <span *ngIf="items.stations.length > 0">
     {{items.stations[0].station}}
    </span>
    <span *ngIf="items.stations.length === 0">
      {{items.arrival}}
    </span>

     <div class="input-group spinner">
     <input type="text" formControlName="price" class="form-control">
     <div class="input-group-btn-vertical">
     <button (click)="spinnerPriceUp()" class="btn btn-default" 
     type="button"><i class="fa fa-caret-up"></i></button>
     <button (click)="spinnerPriceDown()" class="btn btn-default" 
     type="button"><i class="fa fa-caret-down"></i></button>
     </div>
    </div>
 </div>    

  <div *ngFor="let item of items.stations; let i=index, let last = last">

      <div *ngIf="!last">
      <span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">
         {{items.stations[i+1].station}}</span>
      <div class="input-group spinner">
      <input type="text" formControlName="price" class="form-control">
       <div class="input-group-btn-vertical">
       <button (click)="spinnerPriceUp()" class="btn btn-default" 
          type="button"><i class="fa fa-caret-up"></i></button>
       <button (click)="spinnerPriceDown()" class="btn btn-default" 
           type="button"><i class="fa fa-caret-down"></i></button>
        </div>
      </div>
    </div>
  </form>

所以，你不关心这个代码，因为我按预期工作，我的问题是，当我点击提交botton我想生成像这个JSON对象：

{object：[{＆＃34; price＆＃34;：＆＃34;值＆＃34;}，{＆＃34;价格＆＃34;：＆＃34;价值＆＃34;}，{ ，＆＃34;价格＆＃34;：＆＃34;价值＆＃34;}，{＆＃34;价格＆＃34;：＆＃34;价值＆＃34;}，{＆＃34;价格＆＃34 ;：＆＃34;值＆＃34;}]}

JSON对象中提到的值是UI中价格文本框字段中的值。（上图）

我尝试了这些代码，但它不起作用：Component.ts

ngOnInit() {
  this.myForm = this._fb.group({
  object: this._fb.array([
  this.initArray2()
   ]),
  })
}
initArray2() {
   return this._fb.group({
  price: ['00'],
 });
}

HTML CODE：

<div formArrayName="object" >
                    <div *ngFor="let address of myForm.controls.object.controls; let i=index" [formGroupName]="i" >
//i put the code aboove
</div>

Answer 1

在html中，您的代码ngFor循环缺少关闭div。
您的formGroup需要声明myform: FormGroup
如果您打算使用表单构建器，请确保将其注入

（外部组件导出类）

import {FormBuilder, FormGroup} from '@angular/forms';

（在组件导出类中）

constructor(private _fb: FormBuider) {}

您需要遍历表单并获取对象数组，而不是通过站点迭代

<强> .TS

  myForm: FormGroup;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this._fb.group({
      object: this._fb.array([
        this.initArray2()
      ]),
    });

  }


  initArray2() {
    return this._fb.group({
      price: ['00'],
    });
  }

<强> html的

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">

  <div *ngIf="items?.departure">
    <span>{{items.departure}}</span> -->
    <span *ngIf="items.stations.length > 0">
     {{items.stations[0].station}}
    </span>
    <span *ngIf="items.stations.length === 0">
      {{items.arrival}}
    </span>

    <div class="input-group spinner">
      <input type="text" formControlName="price" class="form-control">
      <div class="input-group-btn-vertical">
        <button (click)="spinnerPriceUp()" class="btn btn-default"
                type="button"><i class="fa fa-caret-up"></i></button>
        <button (click)="spinnerPriceDown()" class="btn btn-default"
                type="button"><i class="fa fa-caret-down"></i></button>
      </div>
    </div>
  </div>

  <div formArrayName="object" >
    <div *ngFor="let item of myForm.get('object').controls; let i=index"
         [formGroupName]="i">

      <div class="input-group spinner">
        <input type="text" formControlName="price" class="form-control">
        <div class="input-group-btn-vertical"></div>
      </div>
    </div>
  </div>
</form>

如何使用angular formgroup生成动态文本框字段

1 个答案: