Dynamic FormBuilder text input doesn't work

Ionic Framework ionic-v3
1

I’m creating forms dynamically using FormBuilder, meaning I have multiple pages of inputs, each page a different Group, and the selections on one page are used to dynamically determine the inputs on the next page. For some reason, text and number inputs won’t work using this method, though a select does.

Here’s the the code looks like:

Form page. I included both the text and select versions of the input to confirm the select format worked but the text didn’t.

<ion-content padding>
        <div *ngIf="step == 1">
          <h1>Choose Starting Option</h1>
          <form [formGroup]="firstgroup">
        <ion-list radio-group formControlName="first">
          <ion-item>
            <ion-label>
              <div>Option 1</div>
              <div>Description</div>
            </ion-label>
            <ion-radio checked="true" value="Option1"></ion-radio>
          </ion-item>
        </ion-list>
          </form>
          </div>
        <div *ngIf="step == 2">
          <h1>Choose Next Options</h1>
          <form [formGroup]="secondgroup">
            <ion-list>
              <ion-item *ngFor="let inputType of this.inputProvider.get(this.firstgroup.value.first).Inputs()">
                <ion-label>{{inputType.name}}</ion-label>
                <ion-input [formControlName]="inputType.key"></ion-input>
              </ion-item>
              <ion-item *ngFor="let inputType of this.inputProvider.get(this.firstgroup.value.first).Inputs()">
                <ion-label>{{inputType.name}}</ion-label>
                <ion-select [formControlName]="inputType.key">
                  <ion-option *ngFor="let option of this.inputProvider.get(this.firstgroup.value.first).availableOptionsFor(inputType.type)" [value]="input.value">{{input.key}}</ion-option>
                </ion-select>
              </ion-item>
            </ion-list>
          </form>
        </div>
</ion-content>

The page code the creates the formgroup when you move between steps:

  nextStep() {
    this.step += 1;
    if (this.step == 2) {
      this.secondgroup = this.formBuilder.group(
        this.inputProvider.get(this.firstgroup.value.first).Inputs()
      );
    }
  }

the InputProvider that returns the appropriate class to pull inputs from

export class InputProvider {

  Options: any = {
    Option1
  }

  constructor() {
  }

  get(name: string): OptionBase {
    return new this.Options[name]();
  }
}

And then the methods of the OptionBase derived class that return the inputs

  Inputs(): any {
    var r: {[key: string]: any} = [];
    var inputs = this.startingInputs();
    for (var x = 0; x < inputs.length; x++) {
      r[inputs[x].key] = [""];
    }
    return r;
  }

  startingInputs(): Array<any> {
    return new Array<any>(
      {key:"Input1", name: "Test Input", type: "BasicInput"}
    );
  }

  availableOptionsFor(type: string): Array<any> {
    if (type == "BasicInput")
      return new Array<any>({key:"Option 1", value:"Option1"}, {key:"Option 2", value:"Option2"});
  }

Again, it’s building the forms, the select version of the input works, the text/number version doesn’t, it acts like it’s readonly and I can’t change the value, and I’ve tried adding readonly=“false” to the input definition.