Angular2被动形式，从单选按钮和文本框列表中读取值

我已经动态创建了表单，我遵循了angular2动态表单食谱中的教程：。我在那里创建了我的自定义动态控件“RadioTextboxField”，其中包含单选按钮列表，并且每个单选按钮可以有关联的textbox控件

基类：

export class QuestionBase<T>{
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;

constructor(options: {
  value?: T,
  key?: string,
  label?: string,
  required?: boolean,
  order?: number,
  controlType?: string
  } = {}) 

 {
   this.value = options.value;
   this.key = options.key || '';
   this.label = options.label || '';
   this.required = !!options.required;
   this.order = options.order === undefined ? 1 : options.order;
   this.controlType = options.controlType || '';
  }
}

import { QuestionBase } from './question-base';

export class RadioTextboxField extends QuestionBase<string> {
controlType = 'textbox-radio';
labelRadio: { label: string, isTextBox: boolean, value:any }[] = [];
radioVal:string;

 constructor(options: {} = {}) {
     super(options);
     this.labelRadio = options['labelRadio'] || '';
     this.radioVal = options['radioVal'] || '';
  }
}

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>
   <div [ngSwitch]="question.controlType">

   <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type">

   <select [id]="question.key" *ngSwitchCase="'dropdown'" 
    [formControlName]="question.key">
    <option *ngFor="let opt of question.options" [value]="opt.key">
    {{opt.value}}</option>
    </select>

    <div *ngSwitchCase="'textbox-radio'">
      <div *ngFor="let opts of question.labelRadio; let j=index">

      <!--  my radio-button control !-->
      <input type="radio" [id]="question.key" [value]="opts.value" (click)="question.radioVal=opts.value;" [checked]="question.radioVal==opts.value">     
       <label [attr.for]="question.key" >{{opts.label}}</label>
       <input [id]="'text'+j" *ngIf="opts.isTextBox"
        [type]="text" class="form-control input-sm" [readonly]="question.radioVal!=opts.value" [formControlName]="question.key" [value]="opts.isTextBox ? question.key : opts.value">
     </div>
</div> 
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is 
required</div>

导出类问题库{
值：T；
键：字符串；
标签：字符串；
必需：布尔值；
顺序：编号；
控件类型：字符串；
构造函数（选项：{
价值？：T，
键？：字符串，
标签？：字符串，
必需？：布尔值，
订单？：编号，
controlType？：字符串
} = {}) 
{
this.value=options.value；
this.key=options.key | |“”；
this.label=options.label | |“”；
this.required=！！options.required；
this.order=options.order==未定义？1:options.order；
this.controlType=options.controlType | |“”；
}
}

RadioTexboxField:

export class QuestionBase<T>{
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;

constructor(options: {
  value?: T,
  key?: string,
  label?: string,
  required?: boolean,
  order?: number,
  controlType?: string
  } = {}) 

 {
   this.value = options.value;
   this.key = options.key || '';
   this.label = options.label || '';
   this.required = !!options.required;
   this.order = options.order === undefined ? 1 : options.order;
   this.controlType = options.controlType || '';
  }
}

import { QuestionBase } from './question-base';

export class RadioTextboxField extends QuestionBase<string> {
controlType = 'textbox-radio';
labelRadio: { label: string, isTextBox: boolean, value:any }[] = [];
radioVal:string;

 constructor(options: {} = {}) {
     super(options);
     this.labelRadio = options['labelRadio'] || '';
     this.radioVal = options['radioVal'] || '';
  }
}

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>
   <div [ngSwitch]="question.controlType">

   <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type">

   <select [id]="question.key" *ngSwitchCase="'dropdown'" 
    [formControlName]="question.key">
    <option *ngFor="let opt of question.options" [value]="opt.key">
    {{opt.value}}</option>
    </select>

    <div *ngSwitchCase="'textbox-radio'">
      <div *ngFor="let opts of question.labelRadio; let j=index">

      <!--  my radio-button control !-->
      <input type="radio" [id]="question.key" [value]="opts.value" (click)="question.radioVal=opts.value;" [checked]="question.radioVal==opts.value">     
       <label [attr.for]="question.key" >{{opts.label}}</label>
       <input [id]="'text'+j" *ngIf="opts.isTextBox"
        [type]="text" class="form-control input-sm" [readonly]="question.radioVal!=opts.value" [formControlName]="question.key" [value]="opts.isTextBox ? question.key : opts.value">
     </div>
</div> 
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is 
required</div>

从“/question base”导入{QuestionBase}；
导出类RadioTextboxField扩展了问题库{
controlType='textbox radio'；
labelRadio:{label:string，isTextBox:boolean，value:any}[]=[]；
radioVal：字符串；
构造函数（选项：{}={}）{
超级（期权）；
this.labelRadio=options['labelRadio']| |'；
this.radioVal=选项['radioVal']| |'；
}
}

其中labelRadio:控件中包含的单选按钮和可选文本框列表 （标签：单选按钮旁边显示的标签， isTextBox:如果显示textbox，则指定， 值：如果文本框不可见，则为单选按钮指定值，否则应采用文本框中的值）。 这是我的表格： 表格：

export class QuestionBase<T>{
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;

constructor(options: {
  value?: T,
  key?: string,
  label?: string,
  required?: boolean,
  order?: number,
  controlType?: string
  } = {}) 

 {
   this.value = options.value;
   this.key = options.key || '';
   this.label = options.label || '';
   this.required = !!options.required;
   this.order = options.order === undefined ? 1 : options.order;
   this.controlType = options.controlType || '';
  }
}

import { QuestionBase } from './question-base';

export class RadioTextboxField extends QuestionBase<string> {
controlType = 'textbox-radio';
labelRadio: { label: string, isTextBox: boolean, value:any }[] = [];
radioVal:string;

 constructor(options: {} = {}) {
     super(options);
     this.labelRadio = options['labelRadio'] || '';
     this.radioVal = options['radioVal'] || '';
  }
}

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>
   <div [ngSwitch]="question.controlType">

   <input *ngSwitchCase="'textbox'" [formControlName]="question.key"
        [id]="question.key" [type]="question.type">

   <select [id]="question.key" *ngSwitchCase="'dropdown'" 
    [formControlName]="question.key">
    <option *ngFor="let opt of question.options" [value]="opt.key">
    {{opt.value}}</option>
    </select>

    <div *ngSwitchCase="'textbox-radio'">
      <div *ngFor="let opts of question.labelRadio; let j=index">

      <!--  my radio-button control !-->
      <input type="radio" [id]="question.key" [value]="opts.value" (click)="question.radioVal=opts.value;" [checked]="question.radioVal==opts.value">     
       <label [attr.for]="question.key" >{{opts.label}}</label>
       <input [id]="'text'+j" *ngIf="opts.isTextBox"
        [type]="text" class="form-control input-sm" [readonly]="question.radioVal!=opts.value" [formControlName]="question.key" [value]="opts.isTextBox ? question.key : opts.value">
     </div>
</div> 
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is 
required</div>

{{question.label}
{{opt.value}}
{{opts.label}
{{question.label}}是
必修的

我无法从该控件读取值，无法从单选按钮或文本框（如果显示）获取值。我想也禁用文本框，如果相关联的单选按钮是不检查。以下是指向plunker完整代码的链接： 请帮帮我，我不知道怎么解决这个问题