TypeError: Не удается прочитать свойство 'formModel' из неопределенного

Question

Я получаю эту ошибку при использовании реактивных форм. Вот мой код

<div [formGroup]="service.formModel" fxLayout="row" fxLayout.xs="column">
    <mat-form-field fxFlex="33%" appearance="outline">
      <mat-label class="label-text">District</mat-label>
      <mat-select formControlName="District">
        <mat-option value="None">None</mat-option>
        <mat-option *ngFor="let district of districts" [value]="district.value">{{district}}</mat-option>
      </mat-select>
      <mat-icon class="icon-color" matSuffix>layers</mat-icon>
    </mat-form-field></div>

, а вот массив Districs:

файл компонента

districts:string[] = [
  'Queensland', 'New South Wales','Australian Capital Territory'];

файл служб!

  formModel = this.fb.group({
 District:['']});

Почему я получаю эту ошибку, может быть, потому что район является нулевым или что-то?

Answer 1

вы используете Service, который является нулевым непосредственно в HTML.

Если это действительно служба (правильно определенная в вашем конструкторе), то определите formModel в вашем ngOnInit, например, вВаш компонент:

formModel: FormGroup;

ngOnInit(): void {
   this.formModel = this.service.getFormModel();
}

и в вашем HTML:

<div [formGroup]="formModel" fxLayout="row" fxLayout.xs="column">

И к вашим услугам:

getFormModel(): FormGroup {
  return this.fb.group({
    District:['']
  });
}

Answer 2

У вас есть синтаксическая ошибка, код должен быть таким -

<div [formGroup]="formModel" fxLayout="row" fxLayout.xs="column">
.....

• FormGroup должно быть formGroup
• Привязка к группе формы должна быть formModel вместоService.formModel