title: Angular 2. Rebuild form control(s)
body: <p>Is there a way to force Angular form to recreate it's controls? I mean creating new instances? Looks like it only creates them on initial load. Not sure if I really need it but here's my issue:</p>
  
  <p>I have an "edit" control which has an <code>@Input() set item(editItem)</code> of the item I need to edit. I set this item from its parent and the control should reset the form values.
  Within a form I use my own custom dropdown control which has bindable list of options.</p>
  
  <p>Generally it looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>    @Component({
        template:`
          &lt;form [formGroup]="form"&gt;
            &lt;my-control [items]="items" formControlName="itemId"&gt;&lt;/app-combobox&gt;
          &lt;/form&gt;
        `
  
      export class EditComponent implements OnInit {
        items = [{text: 'Item 1', itemId: 1}, {text: 'Item 2', itemId: 2}];
  
        @Input() set editItem(item) {
          //if some logic...
            this.items = [{text: 'Item 3', itemId: 3}, {text: 'Item 4', itemId: 4}];
  
          this.initForm(item);
        }
  
        constructor(private _fb: FormBuilder) {}
  
        ngOnInit(): void {
          this.initForm();
        }
  
        initForm(item?) {
          this.form = this._fb.group({
            // itemId could differ and should be in the items list before binding happens
            'itemId': [item ? item.itemId : null]
        }
      }
  </code></pre>
  
  <p>and the control:</p>
  
  <pre class="lang-js prettyprint-override"><code>    export class ComboboxComponent implements ControlValueAccessor {
        items = [];
  
        @Input() set items(list[]) {
          this.items = list;
          this.updateValue();
        }
  
        // ControlValueAccessor implementation
        writeValue(value: any) {
           this.updateValue();
        }
  
        updateValue() {
          // here we try to use a newly updated list (but it's not updated yet!)
        }
      }
  </code></pre>
  
  <p>And the problem is that even if I set a new list of items before creating new formGroup the form binding happens before my items list binding. The <code>writeValue</code> method from the <code>ControlValueAccessor</code> interface gets called before <code>@Input() set items([])</code> on my dropdown control.</p>
  
  <p>I can use <code>setTimeout(() =&gt; this.updateValue())</code> inside the <code>writeValue</code> and it seems to help but I don't like this solution. How can I make control property binding to happen before form binding? Calling timeout or forcing Angular to detect changes before <code>initForm()</code> doesn't work.</p>