title: Add Select inside Angular FormGroup and bind selected value
body: <p>I have a form with a text input and then I want to add a select inside that Form:</p>
  <p>The select is an array:</p>
  <pre><code>typeAlert: TypeAlert[] = [
      { value: 'MEDICAL'},
      { value: 'POLICE'},
      { value: 'FIRE'}
    ];
  </code></pre>
  <p>I want to bind the value selected on the select. I have a var called select to store which the user has selected. I have to add the selected inside formGroup?</p>
  <p>Also I am getting this error:</p>
  <blockquote>
  <p>ngModel cannot be used to register form controls with a parent formGroup directive</p>
  </blockquote>
  <p>component.html</p>
  <pre><code>&lt;form class=&quot;container&quot; [formGroup]=&quot;alertForm&quot;&gt;
    &lt;div class=&quot;actions&quot;&gt;
      &lt;div class=&quot;action&quot; [routerLink]=&quot;['/alertes']&quot;&gt;
        &lt;span&gt;Torna a Alertes&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;space&quot;&gt;&lt;/div&gt;
      &lt;button class=&quot;action&quot; (click)=&quot;save()&quot; [disabled]=&quot;!alertForm.valid&quot;&gt;
        Guardar
      &lt;/button&gt;
    &lt;/div&gt;
  
    
    &lt;div class=&quot;dades&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-title&quot;&gt;
          &lt;b&gt;Title&lt;/b&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
          &lt;mat-form-field&gt;
            &lt;mat-label&gt;Title&lt;/mat-label&gt;
            &lt;input formControlName=&quot;title&quot; matInput&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;dades&quot;&gt;
      &lt;div class=&quot;card&quot;&gt;
        &lt;div class=&quot;card-title&quot;&gt;
          &lt;b&gt;Type Alert&lt;/b&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-content&quot;&gt;
          &lt;mat-form-field appearance=&quot;fill&quot;&gt;
            &lt;mat-label&gt;Type Alert&lt;/mat-label&gt;
            &lt;mat-select [(ngModel)]=&quot;selected&quot;&gt;
              &lt;mat-option *ngFor=&quot;let alert of typeAlert&quot; [value]=&quot;alert.value&quot;&gt;
                {{alert.value}}
              &lt;/mat-option&gt;
            &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>component.ts:</p>
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
  import { ActivatedRoute, Router } from '@angular/router';
  import { AlertesService } from 'src/app/core/services/alertes.service';
  import { MatDialog } from '@angular/material/dialog';
  import { DialogNotificationsComponent } from 'src/app/shared/components/dialog-notifications/dialog-notifications.component';
  interface TypeAlert {
    value: string;
  }
  @Component({
    selector: 'app-alert',
    templateUrl: './alert.component.html',
    styleUrls: ['./alert.component.scss']
  })
  export class AlertComponent implements OnInit, OnDestroy {
  
    typeAlert: TypeAlert[] = [
      { value: 'MEDICAL'},
      { value: 'POLICE'},
      { value: 'FIRE'}
    ];
  
    selected: string = this.typeAlert[0].value;
    alertForm: FormGroup;
    alert;
  
    constructor(
      private alertesService: AlertesService, 
      private route: ActivatedRoute,
      private router: Router,
      public dialog: MatDialog
    ) { }
  
    ngOnInit() {
      this.alert = this.route.snapshot.data.alert;
      this.initForm();
  
    }
  
    ngOnDestroy() {
    }
  
    initForm() {
      this.alertForm = new FormGroup({
        title: new FormControl(this.alert ? this.alert.title : '', [Validators.required]),
      });
    }
  
    save() {
      console.log(this.selected);
      if(this.alert) {
        this.alertesService.update(this.alert._id, this.alertForm.value).subscribe(() =&gt; {
          this.router.navigate(['/alertes'])
        })  
      }
      else {
        const dialogRef = this.dialog.open(DialogNotificationsComponent, {
          width: '600px',
          data: {title: &quot;Nova alerta&quot;, msg: this.alertForm.value.title}
        });
        dialogRef.afterClosed().subscribe(result =&gt; {
          console.log(result);
          if(result != undefined &amp;&amp; result != null) {
            this.alertesService.create({
              notification: result ? result: null,
              ...this.alertForm.value
            }).subscribe(() =&gt; {
              this.router.navigate(['/alertes'])
            })      
          }
        });
      }
    }
  }
  
  </code></pre>