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

其中一个选项是反应形式

模板

<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>

成分</ P>

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!";
}

Answer 2

您的意思是一起显示/隐藏多个表单字段吗？您可以对它们进行分组并使用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>

Ionic 2动态添加表单字段

2 个答案: