动态表单Angular2。条件字段可见性

Posted 2023-03-13

【中文标题】动态表单Angular2。条件字段可见性

【英文标题】：Dynamic forms Angular2. Conditional field visibility

【发布时间】：2016-11-24 20:10:48

【问题描述】：

我想仅在使用动态表单的另一个字段中有具体值时才显示一个字段。

我为 QuestionBase (app/question-base.ts) 类定义了一个新属性“条件：布尔值” 我的目的是在另一个领域具有具体价值时动态地显示一个领域。我将此字段命名为“条件”

我认为我必须在 app/dynamic-form-question.component.html 的标签中包含任何像 *ngIf 这样的句子来注入个性化条件，但我被卡住了。 *ngIf 在条件定义为字符串时不评估 question.condition。我找不到任何解决方案来将 app/question.service.ts 中的表达式定义为布尔值。

e.g.
      new TextboxQuestion(
        key: 'conditional',
        label: 'Conditional Field',
        type: 'text',
        condition: brave.value == solid, (something like this, brave is other field in this form)
        order: 5
      )

然后 a 将读取条件表达式以了解更改可见性。

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

这是plunker。该示例来自 angular2 教程，有一些更改。 我搜索了很多关于动态表单的内容，可能是因为我是Angular2的初学者。

非常感谢

【问题讨论】：

我也遇到了同样的问题..你最后找到解决办法了吗？

我解决了这个问题，方法是向我的接口添加另一个属性，称为条件，它接受一个应该始终返回真或假的函数。然后在我的模板中，当将表单注入我的函数时，我只需检查它是否返回 true。

【参考方案1】：

给输入一个：'ngControl="questionKey"' 或任何你喜欢的，它会在类的顶部 questionKey:Control 中定义。然后在 select 元素上添加 *ngIf="questionKey.value"，如果 value 为 true，它将显示元素。在输入框和开关上进行更具体的输入运行验证

*ngIf="questionKey.value" to *ngIf="questionKey.valid"

这就是我通常的做法

【讨论】：

我不确定我是否理解你，但我将进一步了解 ngControl 并测试一些变体。谢谢。

如果有时间，我可能会在今天晚些时候写一个更全面的答案