Question

我正在创建一个动态表单，我根据JSON的响应动态填充字段。

例如： -

[{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fname",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lname",
  "visibility":"fname == 'abc' || fname == 'xyz'"
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"fid",
  "visibility":true
},
{
  "type":"text",
  "required":true,
  "minlength": 3,
  "maxlength":5,
  "name":"lid",
  "visibility":"fid == 1 || fid == 4"
}]

我有一个用例，只有当第一个字段的值为＆＃39; abc＆＃39;时才能看到第二个字段。或者＆＃39; xyz＆＃39;（条件写在JSON属性中）。如何动态实现？

Answer 1

在组件中创建evaluation方法：

 isVisible(value){
    //console.log(eval(value));
    return eval(value); 
  }

并在模板中调用它：

<div *ngIf="isVisible(question.visibility)">
        <label [attr.for]="question.key">{{question.label}}</label>
        <div [ngSwitch]="question.controlType">
            <input [name]="question.key" *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>
        <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
    </div>

您的json文件将如下：

 ...
 new TextboxQuestion({
        key: 'firstName',
        label: 'First name',
        value: 'Bombasto',
        required: true,
        order: 1, 
        visibility: 'true'
      }),

      new TextboxQuestion({
        key: 'emailAddress',
        label: 'Email',
        type: 'email',
        order: 2,
        visibility: 'this.form.get("firstName").value ==="abc"'
      })

visibility: 'this.form.get("firstName").value ==="abc"'，正如您所见，您应该像往常一样在组件类逻辑中编写json，因为它将在组件上下文中运行

CODE EXAMPLE

如何在角度4中以动态形式设置ngIf动态条件

1 个答案: