1

フォームを動的に作成しました。動的フォームの angular2 クックブックのチュートリアルに従いました: Tutorial。そこで、ラジオボタンのリストを含むカスタム動的コントロール「RadioTextboxField」を作成しました。オプションで、各ラジオボタンにテキストボックスコントロールを関連付けることができます。

基本クラス:

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

RadioTexboxフィールド:

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:コントロールに含まれるラジオボタンとオプションのテキストボックスのリスト ( label:ラジオボタンの横に表示されるラベル、 isTextBox:テキストボックスが表示される場合に指定、 value:テキストボックスが表示されない場合にラジオボタンに指定される値、それ以外の場合は、テキスト ボックスの値を取得する必要があります)。ここに私のフォームがあります: フォーム:

<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 助けてください。これを解決する方法がわかりません。

4

0 に答える 0