Angular & Firestore - Добавить данные специального ngModel

Question

У меня есть рабочая база данных, которая успешно добавляет данные в базу данных при отправке. Проблема в том, что, поскольку я не знал как, и это вызывало проблемы, я пропустил один ввод - просто пакеты. Этот ввод доступен только для чтения и получает данные отдельно от выбора над самой формой.

Я хочу, чтобы эти входные данные также сохранялись в базе данных, но в то же время показывали привязку свойства.

Как вы можете видеть в приведенном ниже коде формы, я еще не изменил входную ngModel на service.formData ..., потому что, как только я это сделаю, я получу ошибку, которую Angular не может установить значение неопределенного свойства и, очевидно, свойство selectedPackage больше не будут отображаться.

@Input() selectedDiv: number;
  @Input() packageInput: boolean;
  selectedPackage: string;
  submitted: boolean;
  success: boolean = false;

  onSubmit(form: NgForm): void {
    this.submitted = true;
    this.success = false;

    if (form.invalid) {
      return;
    }
    let data = form.value;
    this.firestore.collection('requests').add(data);
    this.resetForm(form);
    this.submitted = false;
    this.success = true;
  }

  resetForm(form?: NgForm): void {
    if (form != null) form.resetForm();
    this.service.formData = {
        name: '',
        lastname: '',
        email: '',
        date: '',
        text: '',
      };
  }

  changePackageInfo(): void {
    if (this.selectedDiv === 0) {
      this.selectedPackage = null;
    }
    if (this.selectedDiv === 1) {
      this.selectedPackage = 'You\'ve chosen Package One';
    }
    if (this.selectedDiv === 2) {
      this.selectedPackage = 'You\'ve chosen Package Two';
    }
    if (this.selectedDiv === 3) {
      this.selectedPackage = 'You\'ve chosen Package Three';
    }
  }

  public ngOnChanges(changes) {
    if ('selectedDiv' in changes) {
      this.changePackageInfo();
      }
    }

  constructor(private service: RequestService, private firestore: AngularFirestore) { }

  ngOnInit() {
    this.resetForm();
    this.changePackageInfo();
  }

<form class="w-75 mb-5 mt-5" (ngSubmit)="onSubmit(f)" #f="ngForm">
      <div class="form-group">
        <div class="form-row">
          <div class="col">
            <input type="text" name="name" id="name" class="form-control" placeholder="Name" #name="ngModel" [class.is-invalid]="submitted && name.invalid" [(ngModel)]="service.formData.name" required>
          </div>
          <div class="col">
            <input type="text" name="lastname" id="lastname" class="form-control" placeholder="Future Family Name" #lastname="ngModel" [class.is-invalid]="submitted && lastname.invalid" [(ngModel)]="service.formData.lastname" required>
          </div>
        </div>
      </div>
      <div class="form-group">
        <input type="email" name="email" id="email" class="form-control" placeholder="E-Mail" #email="ngModel" [class.is-invalid]="submitted && email.invalid" [(ngModel)]="service.formData.email" required>
      </div>
      <div class="form-group">
        <input type="text" *ngIf="packageInput" name="package" id="package" placeholder="Please choose a package from the selection above!" class="form-control" #package="ngModel" [(ngModel)]="selectedPackage" [class.is-invalid]="submitted && package.invalid" required readonly>
      </div>
      <div class="form-group">
        <input type="date" name="date" id="date" class="form-control" #date="ngModel" [class.is-invalid]="submitted && date.invalid" [(ngModel)]="service.formData.date" required>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="text" id="text" rows="4" placeholder="Your message.." [(ngModel)]="service.formData.text"></textarea>
      </div>
      <div class="w-100 d-flex justify-content-center">
        <div class="row">
          <div class="col-12 text-center">
            <span class="alert-custom display-none" [class.display]="submitted && f.invalid">Please fill in the required fields above.</span>
          </div>
          <div class="col-12 text-center">
            <span class="alert-custom display-none" [class.display]="success">Thank's for the request. You'll hear from me soon!</span>
          </div>
          <div class="col-12 text-center mt-2">
            <button type="submit">Send</button>
          </div>
        </div>
      </div>
    </form>