загрузить данные в контрольном выборе с угловыми 7 реактивными формами

Question

Я делаю несколько тестов в Angular 7, я хочу загрузить Select формы с данными массива, а затем получить его значения.Кажется, это работает хуже при ошибках консоли. Я хотел бы знать, как их решать и какими они должны быть.Я оставляю код шаблона и компонента, а также оставляю ошибки консоли.

Я пытаюсь использовать не шаблон, а компонент.

[ШАБЛОН] [HTML]

https://ibb.co/NKJtjWD

<mat-toolbar color="primary">
  <span>MAPS</span>
</mat-toolbar>

<div class="main-container">
  <mat-card>
    <div style="width: 100%">
      <div style="width: 500px;position: relative;">
        <iframe width="500" height="500" src="https://maps.google.com/maps?width=500&amp;height=500&amp;hl=en&amp;q=18.22141715%2C%20-66.4132818505648+(Propiedades)&amp;ie=UTF8&amp;t=&amp;z=8&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;"><small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a href="http://www.googlemapsgenerator.com/nl/">https://www.googlemapsgenerator.com/nl/</a> & <a href="http://lnk.direct/7Lf4">http://lnk.direct/7Lf4</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><br />
    </div>
    <div>
      <form [formGroup]='forma' (ngSubmit)='buscar()' >
        <div class="form-group">
          <label for="nombre">Nombre</label>
          <input
          type="text"
          class="form-control"
          id="nombre"
          aria-describedby="emailHelp"
          placeholder="Enter email"
          formControlName="nombre"
          >
        </div>
        <div class="form-group">
          <label for="nombre">Select</label>
          <select
          class="form-control"
          formArrayName="selectValues"
          [(ngModel)]="array"
          >
          <option  *ngFor="let i of array; let idx= index" [ngValue]="c" >{{i}}</option>
          </select>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-outline btn-primary">Enviar</button>
        </div>
      </form>
    </div>
    {{forma.valid}}
  </mat-card>


</div>

[КОМПОНЕНТ]

<pre><code>

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mapas';
  forma: FormGroup;
  array: any[] = ['a','b','c'];


//Para poner mas validaciones se ponen entre [] y no separados por coma ya que el tercer parametro es para validaciones async
  constructor(){
    this.forma = new FormGroup({
      'nombre': new FormControl('Mathias', Validators.required),
      'selectValues': new FormArray([
        new FormControl(this.array)
      ])
    })
  }

  buscar(){
    console.log(this.forma.value);
    console.log(this.forma.value['selectValues'])
    this.forma.reset();
  }
}

и это хромированные консольные выходы:

AppComponent.html:26 ERROR Error: 
      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
      formGroup's partner directive "formControlName" instead.