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>