форма: может добавлять новый объект, но не элементы этого объекта

Question

Итак, у меня есть этот сайт со списком болезней с соответствующими симптомами. Я попытался добавить функцию добавления болезни через форму, и это сработало. Затем я попытался сделать так, чтобы вы могли добавить симптом к новому заболеванию, но это не сработало. К списку добавляется болезнь, но не симптом.

Вот компонент ts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Disease } from '../disease.model';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Symptom } from '../symptom.model';

@Component({
  selector: 'app-add-disease',
  templateUrl: './add-disease.component.html',
  styleUrls: ['./add-disease.component.css']
})
export class AddDiseaseComponent implements OnInit {
  public disease: FormGroup;
  @Output() public newDisease = new EventEmitter<Disease>();

  constructor(private fb: FormBuilder) { }

  getErrorMessage(errors: any): string {
    if (errors.required) {
      return 'is required';
    } else if (errors.minlength) {
      return `needs at least ${errors.minlength.requiredLength}
      characters (got ${errors.minlength.actualLength})`;
    }

  }
  ngOnInit(): void {
    this.disease = this.fb.group({
      name: ['', [Validators.required, Validators.maxLength(35)]],
      symptoms: this.fb.array([this.createSymptoms()])
    });
  }
  createSymptoms(): FormGroup {
    return this.fb.group({
      severity: [''],
      name: ['', [Validators.required, Validators.maxLength(15)]]
    });
  }
  /* addDisease(diseaseName: HTMLInputElement): boolean {
     const disease = new Disease(diseaseName.value, []);
     this.newDisease.emit(disease);
     return false;
   }*/
  onSubmit() {
    let symptoms = this.disease.value.symptoms.map(Symptom.fromJson);
    symptoms = symptoms.filter(sym => sym.name.length < 15);
    this.newDisease.emit(new Disease(this.disease.value.name));

    this.disease = this.fb.group({
      name: ['', [Validators.required, Validators.maxLength(15)]],
      symptoms: this.fb.array([this.createSymptoms()])
    });
  }

}

а вот мой html

<mat-card>
  <mat-card-title>add disease</mat-card-title>
  <mat-card-content>
    <form [formGroup]="disease" (ngSubmit)='onSubmit()'>
      <mat-form-field>
        <input matInput aria-label="name" placeholder="name" type="text" formControlName="name" />
        <mat-error *ngIf="disease.get('name')['errors']
         && disease.get('name').touched">
          {{getErrorMessage(disease.get('name')['errors']) }}

        </mat-error>
      </mat-form-field>

      <div formArrayName="symptoms" *ngFor="let item of disease.get('symptoms')['controls']; let i= index">
        <div [formGroupName]="i">
          <mat-form-field>
            <input matInput type="text" aria-label="symptom severity" placeholder="severity"
              formControlName="severity" />
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="name" aria-label="symptom name" type="text" formControlName="name" />
          </mat-form-field>
        </div>
      </div>
      <button type='submit' mat-raised-button [disabled]='!disease.valid'>
        add disease
      </button>
    </form>
  </mat-card-content>
</mat-card>
REMOVE {{disease.get('name') ['errors'] |json }}

в моей функции onSubmit (), если я сделаю это: this.newDisease.emit (new Disease (this.disease.value.name));

болезнь добавляется без симптома

, если я сделаю это: this.newDisease.emit (новое заболевание (this.disease.value.name, симптомы)); болезнь даже не добавляется.