Angular 6 Невозможно установить выбранное значение по умолчанию из базы данных в раскрывающийся список и не может прочитать свойство setValue () error

Question

У меня есть следующая реактивная форма:

this.formGroup = this.fb.group({
'unit_type': new FormControl('', [Validators.required]),
'location_type_id': new FormControl('', [Validators.required]),
'number_of_hh': new FormControl('', [Validators.required]),
'unit_status': new FormControl('', [Validators.required]),
'legal': new FormControl(''),
'protection': new FormControl(''),
'legal_id': new FormControl(''),
'protection_id': new FormControl(''),
'situation_id': new FormControl(''),
'add_date': new FormControl('', [Validators.required])
})

И его HTML-скрипт:

<form [formGroup]="formGroup" role="form">
  <mat-card class="mat-card-left">
    <mat-card-title>Add unit basic Information</mat-card-title>
    <mat-card-content>
      <mat-form-field color="warn">
        <input matInput formControlName="unit_type" placeholder="Unit type" [value]="unit_type">
      </mat-form-field>&nbsp;
      <mat-form-field>
        <mat-select id="location_type_id" formControlName="location_type_id" placeholder="Location">

          <mat-option *ngFor="let location of locationData" [value]="location.location_id_auto">
            {{location.full_pcode}}
          </mat-option>
        </mat-select>
      </mat-form-field>&nbsp;
      <mat-form-field color="warn">
        <input matInput formControlName="number_of_hh" type="number" placeholder="Number of Households" value="{{unit_number_hh}}">
      </mat-form-field>&nbsp;
      <mat-form-field color="warn">
        <mat-select formControlName="unit_status" placeholder="Unit Status">
          <mat-option *ngIf="unit_status!='Active'" value="Active">Active</mat-option>
          <mat-option *ngIf="unit_status!='Inactive'" value="Inactive">Inactive</mat-option>
        </mat-select>
      </mat-form-field>&nbsp;
      <button mat-raised-button color="warn" (click)="updateUnitData()">
        <mat-icon>update</mat-icon> Update</button>
    </mat-card-content>

  </mat-card>&nbsp;
</form>

Я получаю значения из базы данных, и одно из них, это значения в выпадающем списке unit_status.

Так что мне нужно установить значение по умолчанию для выпадающего списка на отправленное значение.

Я пытался сделать следующее:

 this.unit_type = data['unit_info'][0]['unit_type'];
this.formGroup.controls['unit_type'].setValue(this.unit_type);

this.location = data['unit_info'][0]['location_id_auto']; 
this.formGroup.controls['location_type_id'].setValue(this.location);

this.unit_number_hh = data['unit_info'][0]['unit_number_hh'];
this.formGroup.controls['unit_number_hh'].setValue(this.unit_number_hh);

поля ввода отображают значения, но выпадающий список нет, и отображается ошибка:

core.js: 1633 ОШИБКА TypeError: Невозможно прочитать свойство 'setValue' из не определено на SafeSubscriber._next (unit-edit.component.ts: 64)

Все значения существуют, и я вижу их на консоли.

Answer 1

*ngIf в опциях не слишком нужен, так как вы хотите сохранить выбранные опции.

и this.formGroup.controls['unit_number_hh'].setValue(value), кажется, не работает, но с

this.formGroup.get('unit_number_hh').setValue(value) работает как положено

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  form: FormGroup;
  loader:boolean;

constructor(private fb: FormBuilder){
 this.createForm()
}

createForm(){
  this.form = this.fb.group({
        names: [''],
        gender: ['']
      });
    }

    fetch(){
      this.loader = true;
      this._fetch().then(data => {
        this.form.get('names').setValue(data.names)
        this.form.get('gender').setValue(data.gender)
        this.loader = false
      })
    }


    private _fetch():Promise<{names:string, gender:string}>{
      return new Promise((res, rej)=> {
        setTimeout(() => {
          res({names: 'Theophilus', gender: 'Male'})
        }, 3000)
      })
    }
}

Шаблон вроде так

<form [formGroup]="form" novalidate>
    <div class="example-container">
    <p *ngIf="loader">Loading...</p>
        <mat-form-field>
            <input matInput placeholder="Input" formControlName="names">
        </mat-form-field>

        <mat-form-field>
            <mat-select placeholder="Select" formControlName="gender">
                <mat-option value="Male">Male</mat-option>
        <mat-option value="Female">Female</mat-option>
            </mat-select>
        </mat-form-field>

<button (click)="fetch()">Fetch defaults</button>
    <button type="submit">Save</button>
    </div>
</form>

Демо с выбором материала https://stackblitz.com/edit/material-select-formcontrol

Answer 2

попробуйте это:

myformGroup.get('name of the control to get').setValue();