javascript - Angular 2：以动态形式将依赖表达式动态绑定到变量

Question

我正在尝试将表达式绑定到 Angular 动态表单中动态创建的字段。我正在使用 Angular 站点中给出的食谱代码作为参考，但无法完全实现我正在寻找的内容。我希望 'c' 绑定动态创建的 'a' 和 'b' 表单控件。我的应用程序的目标是从用户那里获取科学方程式，并在您更改输入值时执行方程式。请帮忙。

  new TextboxQuestion({
    key: 'a',
    label: 'Breadth',
    value: 2,
    required: true,
    order: 4
  }),

  new TextboxQuestion({
    key: 'b',
    label: 'Length',
    value: 2,
    required: true,
    order:5
  }),
  new LabelQuestion({
    key: 'c',
    formula:'a*b',
    order: 6,
    type:'text'
  }),

我正在尝试对公式进行“评估”，以便在设置表单字段后将其转换为表达式。创建表单组后如何确保双向绑定？

我的 LabelQuestion 组件如下

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

export class LabelQuestion extends QuestionBase<string> {
  controlType = 'label';
  type: string;
  options: {key: string, value: string}[] = [];


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

}

而dynamic-component.html如下。

   <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" [(ngModel)]="question.key">

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

  <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>