单击 angular formly 中的其他字段绑定到 formly 字段的模板

Question

我一直在使用一个表单，其中有一个部分显示动态 HTML，我使用了在加载时初始化 HTML 的模板字段。当我单击其他字段值时，我需要更改此 HTML 但是值更改已分配但未反映在 HTML UI 中，我已经为场景创建了 stackblitz 示例：

Stackblitz Click here

请在下面找到代码片段：

已初始化 HTML 值如下：

htmlValue = '<p>test</p>';

分配的字段值：

{ template : this.htmlValue }

点击提交按钮分配 HTML 应该预期输出：

this.htmlValue = `

          <p class="mb-2"><b>Maximum  Spend Per Cricketer:</b></p>
          <div class="alert alert-secondary border flex-column mb-0">
            <div class="row">
              <div class="col">Snacks:</div>
              <div class="col">.00</div>
            </div>
            <div class="row">
              <div class="col">Breakfast:</div>
              <div class="col">.00</div>
            </div>
            <div class="row">
              <div class="col">Lunch:</div>
              <div class="col">.00</div>
            </div>
          </div>
        </div>`;

如何实现这个输出？

Answer 1

我会用一个简单的代码来解释你的问题

let a = 4;
let b = {a}
a= 8;

console.log({a})
console.log({b})

很简单的解释，你改变了a但b没有改变。与您的情况相同，您已更改 htmlValue 但 fields 未更改。解决这个问题的一个简单方法是使用 getter

  get fields(): FormlyFieldConfig[] {
    return [
      {
        key: "header",
        type: "input",
        templateOptions: {
          type: "text",
          label: "Page Header",
          placeholder: "Enter page header",
          required: true
        }
      },
      {
        template: this.htmlValue
      }
    ];
  }

对于getter，只要htmlValue的值改变，字段的值就会改变

编辑

另一种选择是简单地更改四个形式对象中模板部分的值

this.fields[1].template = this.htmlValue;

See Demo Here

单击 angular formly 中的其他字段绑定到 formly 字段的模板

Bind to template of formly field on click of other field in angular formly

javascript

angular-formly

angular

编辑