Question

我已经动态创建了表单，我按照angular2 cookbook中的动态表单教程：Tutorial。我在那里创建了我的自定义动态控件＆＃34; RadioTextboxField＆＃34;，其中包含单选按钮列表，并且可选地，每个单选按钮都可以具有关联的文本框控件。

基类：

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 || '';
  }
}

RadioTexboxField：

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'] || '';
  }
}

其中 labelRadio：控制台中包含的单选按钮和可选文本框列表（标签：标签显示在单选按钮旁边，如果显示文本框，则指定 isTextBox：，值：如果文本框不可见则为单选按钮指定的值，否则应从文本框中获取值）。这是我的表格：的形式：

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

我有问题从该控件读取值，从单选按钮获取值，或者可选地从文本框中获取值（如果已显示）。我想也禁用文本框，如果与它相关联单选按钮不检查。以下是关于plunker的完整代码的链接：plunker 请帮帮我，我不知道如何解决这个问题。

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

0 个答案: