Angular 4 个动态表单：编辑下拉列表不起作用

Question

我正在创建一个 Angular 4 动态多步骤表单。表单的最后一步向用户显示他们输入的所有值，并让他们有机会进行编辑。当用户点击 "edit" 时，他们会回到那个特定的问题。

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

我添加了一个 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 个动态表单：编辑下拉列表不起作用

Angular 4 Dynamic Forms: Edit Dropdown NOT Working

forms

dynamic

renderer

dropdown

angular