角度2つの動的反応型要素タイプ

Question

私は例の「テキストボックスの横に他のフォーム要素の種類を設定する方法上の任意の情報を見つけることができませんでしたhttps://angular.io/guide/dynamic-form

でダイナミックなフォームの例に基づいてフォームを構築しています'と'ドロップダウン '。彼らのコードサンプル：

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

export class TextboxQuestion extends QuestionBase<string> { 
    controlType = 'textbox'; 
    type: string; 

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

は、私は他の値を取ることができるはずだと思うだろう変数「controlType」を持っています。私はちょうどそれを見つけることができなかったそこのいくつかの文書がありますか？または、テキストエリア、チェックボックス、またはラジオボタンを動的フォーム設定に追加する別の方法がありますか？

Answer 1

リンク先のガイドの例は、動的フォームを作成する方法の概念を示しています。 Angularはこのための準備ができていません。

dynamic-form-question.component.htmlテンプレートを独自のタイプで拡張することを考えています。

<div [formGroup]="form"> 
    <!-- ... --> 
    <div [ngSwitch]="question.controlType"> 

    <!-- Your other types here... --> 

    <textarea *ngSwitchCase="'textarea'" [formControlName]="question.key" 
             [id]="question.key"> 

    </div> 
    <!-- ... --> 
</div> 

'textarea'のcontrolTypeで、すべてのダイナミック型に対するtextarea要素を作成します。ここではテキスト領域の例があります。その後、

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

export class TextareaQuestion extends QuestionBase<string> { 
    controlType = 'textarea'; 

    constructor(options: {} = {}) { 
    super(options); 
    } 
} 

そして、あなたはでしょう：controlType、あなたがガイドの例に見るように、彼らはtextareaクラスの簡単な実装はこのようになりますquestion-base.ts

を呼び出して、基本クラスのプロパティだけです次のような質問配列に追加してください：

let questions: QuestionBase<any>[] = [ 
    // ... 
    new TextareaQuestion({ 
    key: 'myTextarea', 
    label: 'My textarea!', 
    order: 1 
    }), 
    // ... 
]