Question

我正在创建一个Angular 4动态多步形式。表单的最后一步向用户显示他们输入的所有值，并为他们提供编辑的机会。当用户点击“编辑”时，它会将他们带回到该特定问题。

编辑适用于输入和复选框，但不适用于下拉列表。它将关注该元素，但不显示用户最初选择的值。

我添加了example。

对于下拉菜单，我有什么不同的做法吗？

由于

Answer 1

您应该避免使用this.renderer2.selectRootElement方法，因为它会清除所选元素的内容：

selectRootElement(selectorOrNode: string|any): any {
    let el: any = typeof selectorOrNode === 'string' ? 
            document.querySelector(selectorOrNode) :
            selectorOrNode;
    if (!el) {
      throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
    }
    el.textContent = ''; <==================== this code
    return el;
}

https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/platform-browser/src/dom/dom_renderer.ts#L137-L145

处理自动对焦的一个选项是将focusedKey传递给动态表单：

<dynamic-control [input]="control" [form]="form" [focusedKey]="focusedKey">
                                                   ^^^^^^^^^^^^^^^^^^^^^^^

然后你可以创建自动聚焦指令，如：

@Directive({
  selector: '[autofocus]'
})
export class AutofocusDirective {
  constructor(private el: ElementRef) {}

  @Input() set autofocus(value) {
    if (value) {
      this.el.nativeElement.focus();
    }
  }
}

并使用它代替id和ChangeDetectorRef

<select [autofocus]="focusedKey === input.key"

<强> Fixed Example

Angular 4动态表单：编辑下拉列表不工作

1 个答案: