Ionic 2动态添加表格字段

Question

我正在寻找动态添加输入字段，有可能吗？有人有例子如何做到这一点？ 例如，当我从我的选择选项中选择2输入字段它显示我和一个我选择5个输入字段它显示我5个输入字段

我认为做这样的事情

<ion-item> 
    <ion-label fixed>Field 1</ion-label> 
    <ion-input type="text" value=""></ion-input> 
    </ion-item> 

    <ion-item *ngIf="someVariable === 'value1'"> 
    <ion-label fixed>Field 2</ion-label> 
    <ion-input type="text" value=""></ion-input> 
    </ion-item> 

</ion-list> 
Then i bind select to someVariable: 

<ion-item> 
    <ion-label>Options</ion-label> 
    <ion-select [(ngModel)]="someVariable"> 
    <ion-option value="value1" selected="true">Option 1</ion-option> 
    <ion-option value="value2">Option 2</ion-option> 
    </ion-select> 
</ion-item> 

这是很好的，但让我们假设我有8个选项，如果用户选择选项5，以便显示他的5个输入字段，我该怎么做？ 此外，如果我这样做，我需要动态声明变量，因为选项5值我需要分配给特定的变量。

Answer 1

你的意思是一起显示/隐藏多个表单域？您可以将它们分组并使用ngIf来切换它们。

<div *ngIf="someVariable === 'option2'"> <!-- your condition here, put all the related fields as the children of this div --> 
    <ion-item *ngFor="let field of option2Fields"> 
    <ion-label fixed>{{field.label}}</ion-label> 
    <ion-input type="text" value=""></ion-input> 
    </ion-item>  
</div> 

Answer 2

选项之一是反应形式

模板

<form [formGroup]="registerForm" class="form-horizontal"> 
    <ion-item *ngFor="let item of fields" [ngClass]="{'has-error': registerForm.controls[item.id].errors}"> 
     <ion-label fixed>{{item.key}}</ion-label> 
     <ion-input type="text" formControlName="{{item.key}}"></ion-input> 
    </ion-item> 
</form> 

<ion-item> 
    <ion-label>Options</ion-label> 
    <ion-select (change)="onFieldChange($event.target.value)"> 
    <ion-option value="1" selected="true">Option 1</ion-option> 
    <ion-option value="2">Option 2</ion-option> 
    </ion-select> 
</ion-item> 

组件

import { Http, Headers } from "@angular/http"; 
import { ActivatedRoute } from "@angular/router"; 
import { Component } from "@angular/core"; 
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; 

@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 
export class AppComponent { 
    fields = []; 
    registerForm: FormGroup = new FormGroup({}); 
    constructor(private formBuilder: FormBuilder) { 

    } 

    onFieldChange(totalFields) { 
     var properties = []; 
     for (var i = 0; i < totalFields; i++) { 
      properties.push({ key: "field_" + i }) 
     } 
    } 

    get value() { 
    //this will return form values as object 
    return this.registerForm.getRawValue(); 
    } 

    setupForm(_properties) { 
     var formData = {}; 
     _properties.forEach(element => { 
      var key = element.key; 
      formData[key] = ['default value if needed']; 
      //here you can write logic if you want fields to be required 
      if (true) { 
       formData[key].push(Validators.required); 
      } 
     }); 

     this.registerForm = this.formBuilder.group(formData); 
     this.registerForm.valueChanges.subscribe(() => { 
      //if you wish here you can emit events when values changed in the form 
     }); 

     this.fields = _properties; 
    } 

    title = "app works!"; 
}