如何在angular2中设置动态创建表单的选择元素的值

Question

I'm working on two problems at once. Fortunately, I've narrowed them down so I can probably ask about the in one question with one plnkr example.

Here's the plnkr code I'm working on: http://plnkr.co/edit/qv1BX7WtpYhw5B92SuoC?p=preview

What is it? It shows two cards, the top card is an example of using Dynamic Chips.

What's wrong with it? After the second chip is removed, that chip's information appears on the select box.

What's happening? When looking at the console output, I've logged the select's value ( <FormArray>this.updateProfileForm.controls["personNames"].value ). What it shows is that when the first select is made, the value is blank. The second time a value is selected, the value becomes what the first selection is.

After removing a chip, we see that the value is still that previously selected value.

What am I trying to do? I'm trying to set the select's value to blank. And I have not discovered or found the way to set the value. If I try <FormArray>this.updateProfileForm.controls["personNames"].value = ''; , it tells me this is not possible with a property that only has a getter.

What is the proper method I should use to set the value to blank?

-- Code block --

<!-- app.component.html -->
<form [formGroup]="updateProfileForm" novalidate (ngSubmit)="save(myForm)">
  <div id="names">
    <md-card>
      <md-toolbar color="primary">Dynamic Chips</md-toolbar>
        <md-card-content>
          <md-chip-list>
            <md-chip *ngFor="let person of people" (click)="removePerson($event)">{{person.name}} [X]</md-chip>
            <md-select id="names"
                       placeholder="Names"
                       formControlName="personNames"
                       (ngModelChange)="addPerson($event)">
                <md-option *ngFor="let name of names" value="{{name.code}}">
                    {{ name.name }}
                </md-option>
                <md-option disabled></md-option>
              </md-select>
          </md-chip-list>
      </md-card-content>
    </md-card>
  </div>
</form> 

--

// app.component.ts
  updateProfileForm: FormGroup;

   names = [
    {code: "F", name: "Frank"},
    {code: "G", name: "George"},
    {code: "H", name: "Henry"},
    {code: "I", name: "Inigo"},
    {code: "J", name: "Jose"},
    {code: "K", name: "Kevin"}
  ];

  removedNames = [];

  people: Person[] = [];

  constructor(private formBuilder: FormBuilder) {      
      this.updateProfileForm = this.formBuilder.group({
        personNames: ['', []]
      });
  }

  addPerson(selection): void {
    let selected = this.names.find(el => el.code === selection);

    this.people.push({name: selected.name});

    this.removedNames.push(selected);
    this.names.splice(this.names.findIndex(el => el === selected), 1);

    const control = <FormArray>this.updateProfileForm.controls["personNames"]
    console.log("Adding: control.value = ", control.value);

  }

  removePerson(chip) {
    // get name and remove the extra text
    let name = chip.target.innerText;
    name = name.substring(0, name.lastIndexOf(' '));

    // get the index of the name from the people array, then remove it from people (chips)
    let index = this.people.findIndex(el => el.name === name);
    this.people.splice(index, 1);

    // get the custom object from the removedNames array 
    let removedName = this.removedNames.find(el => el.name === name)
    // ... and add it back to names and sort
    this.names.push(removedName);
    this.names.sort(function(a, b) {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });

    // ... and remove it from removedNames
    this.removedNames.splice(this.removedNames.findIndex(el => el.name === name), 1);

    const control = <FormArray>this.updateProfileForm.controls["personNames"]
    console.log("Adding: control.value = ", control.value);
  }

Answer 1

Hmm, the answer was really simple. Use "patchValue": https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#set-data

For the code above, I need to use

this.updateProfileForm.patchValue({
    personNames: ''
});

at the end of the removePerson() method. (Get rid of the last two lines, as well - const control... and console.log