Question

我是离子技术的新手，正在尝试根据Json Response制作动态表格。我尝试使用Formbuilder，并成功实现了表单的UI，但是我不知道如何从表单中以Json格式获取数据。

以下是表单的html：

<ion-header>

  <ion-navbar>
    <ion-title>newsDetails</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

<form [formGroup]="formdata" (submit)="submitForm(formdata.value)">
  <ion-card >
    <ion-list padding *ngFor="let details of jsondetails?.product_options">
        {{details.option_name}}
      <ion-card-content>
          <ion-item *ngIf="details.option_type == 'S'" >
            <!--<ion-label>{{details.option_name}}</ion-label>-->

              <ion-select formControlName="details.option_name" >
                  <ion-option *ngFor="let key of details?.variants" value="{{key.variant_id}}"
                  >{{key.variant_name}}</ion-option>
              </ion-select>


          </ion-item>


          <div *ngIf="details.option_type == 'R'" >
           <ion-list radio-group formControlName="details.option_name"  >

             <ion-item *ngFor="let key of details?.variants">
               <ion-label>{{key.variant_name}}</ion-label>

              <ion-radio item-left value = "{{key.variant_id}}">{{key.variant_name}}</ion-radio>

            </ion-item>   
</ion-list>


          </div>

          <div *ngIf="details.option_type == 'C' ">

            <ion-list formControlName="details.option_name">
              <ion-item *ngFor="let key of details?.variants ;let i = index">
              <ion-checkbox (ionChange)="onChange(key.variant_id, $event.checked, i)" value="key.variant_id"></ion-checkbox>
              <ion-label>{{key.variant_name}}</ion-label>
            </ion-item>                  

         </ion-list>
          </div>

          <ion-item *ngIf="details.option_type == 'T'">

              <ion-label floating>{{details.option_name}}</ion-label>
                <ion-textarea #myInput id="myInput" rows="1" maxLength="5" [(ngModel)]="model" 
                formControlName="details.option_name">
                </ion-textarea>

          </ion-item>

      </ion-card-content>
    </ion-list>

      <button ion-button type="submit" [disabled]="!formdata.valid">Submit</button>
  </ion-card>
</form>
</ion-content>

下面是TS代码：

export class NewsDetailsPage {

    public formdata : FormGroup;
    jsondetails: any;
    public selectedArray :any = [];
    //items: FormArray;
    pusheditems = {};

  constructor(public navCtrl: NavController, public navParams: NavParams,private formBuilder: FormBuilder) {
    console.log('111');
   this.ionViewDidLoad();

      this.formdata = this.formBuilder.group({
          // items: this.formBuilder.array([ this.createItem() ])

          //spinner: [''],
          //radio: [''],
          //checkbox: [this.selectedArray],
         // text: ['']
        });

  }

//This is the Dummy JSON which I am using to create form:

  ionViewDidLoad() {
     this.jsondetails = {
        "product_options": [
            {"option_type": "C","value": 62,"option_name": "Accessories",
                "variants": [
                    {"variant_id": "62","position": "1","variant_name": "Ear-phones","formatmodifier": "$30.00"},
                    {"variant_id": "61","position": "2","variant_name": "Head-phones","formatmodifier": "$10.00"},
                    {"variant_id": "63","position": "3","variant_name": "Blutooth-speakers","formatmodifier": "$50.00"}
                ]},
            {"option_type": "S","value": 55,"option_name": "Color",
                "variants": [
                    {"variant_id": "55","variant_name": "White","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "56","variant_name": "Black","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "57","variant_name": "Blue","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "58","variant_name": "Red","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "59","variant_name": "Green","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "60","variant_name": "Yellow","image_pair": [],"formatmodifier": "$0.00"}
                ]},
            {"option_type": "R","value": 54,"option_name": "3G Connectivity",
                "variants": [
                    {"variant_id": "54","variant_name": "NO","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "53","variant_name": "YES","image_pair": [],"formatmodifier": "$125.00"}
                ]},
            {"option_type": "S","value": 49,"option_name": "Memory capacity",
                "variants": [
                    {"variant_id": "49","variant_name": "16GB","image_pair": [],"formatmodifier": "$0.00"},
                    {"variant_id": "50","variant_name": "32GB","image_pair": [],"formatmodifier": "$100.00"},
                    {"variant_id": "51","variant_name": "64GB","image_pair": [],"formatmodifier": "$200.00"},
                    {"variant_id": "52","variant_name": "128GB","image_pair": [],"formatmodifier": "$300.00"}
                ]},
            {"option_type": "T","value": 42,"option_name": "Comment"}
        ]
    };
    console.log('ionViewDidLoad NewsDetailsPage');
    this.getItems();

  }

submitForm(fd){
    console.log(fd)
  }

    getItems() {
    for (var i = 0; i < this.jsondetails.product_options.length; i++) {
      this.pusheditems[this.jsondetails.product_options[i].option_type] = '';
     console.log(this.jsondetails.product_options[i].option_type);

    }
     console.log(this.pusheditems);

  }

 onChange(id, isChecked, index) {

   if(isChecked) {
        this.selectedArray.push(id)
         console.log(this.selectedArray)
    }
    if(!isChecked) {
        //this.selectedArray.push(id)
         const index: number = this.selectedArray.indexOf(id);
         console.log("INDEX---"+index)
    if (index !== -1) {
        this.selectedArray.splice(index, 1);
    }  
         console.log(this.selectedArray)
    }

    console.log(this.selectedArray)
}

//  private addItemForm= this.formBuilder.group({
//     selectedItem: [],
// });



}

我知道我的代码不正确，请帮助我了解实现动态表格的正确方法。预先感谢。

Answer 1

html文件中的

这样做

<ion-select formControlName="details.option_name" [(ngModel)]="selectedValue" name="selectedValue" >
              <ion-option *ngFor="let key of details?.variants" value="{{key.variant_id}}"
              >{{key.variant_name}}</ion-option>
</ion-select>

和ts文件中

public selectedValue:any;
console.log(selectedValue)

它将记录从选择中选择的值。希望对您有所帮助。

使用JSON响应的Ionic 3中的动态表单

1 个答案: