Ionic 2 - 模型驱动形式的设置值

Question

当我想在加载此表单时将以前保存的值从本地存储中归因于此表单时，我遇到了与 Ionic 2 中内置的模型驱动表单相关的问题。

我设法使用 Ionic 的存储服务保存了它，但是我未能将此保存的数据归因于表单。我收到以下错误：

TypeError: 设置一个只有 getter 的属性

这是我的代码，到目前为止：

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-survey',
  templateUrl: 'survey.html',
  providers: [Storage]
})

export class Survey {
  form: FormGroup;
  networkStatus: boolean = true;

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public formBuilder: FormBuilder, private storage: Storage) {

    // localstorage 
    this.storage = storage;

    this.form = formBuilder.group({
      "isPropertyOwner": ["", Validators.required],
      "familyMembers": ["", Validators.compose([Validators.required, Validators.minLength(0)])],
      "ownsProperty": ["", Validators.required],
      "pragueIdentify": ["", Validators.required],
      "pesticidesUsage": ["", Validators.required],
      "propertyLevel": ["", Validators.required]
    });

    /* Check if form has been changed */
   this.form.valueChanges.subscribe(data => 
      this.storage.set('survey', data)
    );
  }

  ngAfterViewInit() {
    // checking if there's something saved, then...
    if(this.storage.get('survey')) {
      this.storage.get('survey').then((data) => {
        console.log('This is ', data);
        this.form.value = data;
      });
    }
  }

  onSubmit(form) {
    console.log(form);
    this.storage.clear().then(() => {
      console.log('Keys have been cleared');
    });

  }
}

如何将保存的值归因于此表单？

Answer 1

FormGroup 的属性value 是只读属性，这意味着您不能直接对其进行编辑。您需要使用get() 函数获取每个FormControl，然后使用setValue() 函数更改其值。无论如何，而不是这个：

this.form.value = data;

你需要使用这个：

this.form.get('isPropertyOwner').setValue(data.isPropertyOwner);
this.form.get('familyMembers').setValue(data.familyMembers);
this.form.get('ownsProperty').setValue(data.ownsProperty);
this.form.get('pragueIdentify').setValue(data.pragueIdentify);
this.form.get('pesticidesUsage').setValue(data.pesticidesUsage);
this.form.get('propertyLevel').setValue(data.propertyLevel);

Answer 2

我认为您必须在从 constructor 中删除以下两行后进行检查，因为您已经将 private storage: Storage 声明为 constructor 参数。

// localstorage 
this.storage = storage;