ng zorro的treeselect组件如何应用在响应式表单中

Question

看了下官方的文档，treeselect给出的例子都是用在模板驱动的表单里的，如何才能应用在响应式表单中呢，
官方代码如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-select-basic',
  template: `
    <nz-tree-select
      style="width: 250px"
      [nzDefaultExpandedKeys]="expandKeys"
      [nzNodes]="nodes"
      nzShowSearch
      nzPlaceHolder="Please select"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)">
    </nz-tree-select>`
})

export class NzDemoTreeSelectBasicComponent implements OnInit {
  expandKeys = [ '100', '1001' ];
  value: string;
  nodes = [ {
    title   : 'parent 1',
    key     : '100',
    children: [ {
      title   : 'parent 1-0',
      key     : '1001',
      children: [
        { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
        { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
      ]
    }, {
      title   : 'parent 1-1',
      key     : '1002',
      children: [
        { title: 'leaf 1-1-0', key: '10020', isLeaf: true }
      ]
    } ]
  } ];

  onChange($event: string): void {
    console.log($event);
  }

  ngOnInit(): void {
    // mock async
    setTimeout(() => {
      this.value = '1001';
    }, 1000);
  }
}

Answer 1

跟其他表单元素一样 加上formControlName="xx"即可，亲自测试OK