Cacher is the code snippet organizer for pro developers

@Component({
  template: `
     <form [formGroup]="form">
      <select formControlName="activeStates" multiple>
        <option value="" disabled>Choose a state</option>
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.name }}
        </option>
      </select>
    </form>
    
     <p>Form value: {{ form.value | json }}</p>
     <!-- value: {activeStates: [{name: 'California', code: 'CA'}] } -->
  `,
})
export class App {
  
  constructor(public fb: FormBuilder) {
     this.states = [
      {name: 'Arizona', code: 'AZ'},
      {name: 'California', code: 'CA'},
      {name: 'Colorado', code: 'CO'}
     ];
    
    this.form = this.fb.group({
        activeStates: [ [this.states[1]] ]
    });
  }
  
}