Javascript 如何使用以前保存的对象在角度反应形式中设置默认值？

我的反应形式差不多完成了。至少这是基本逻辑。我只有一个问题。根据任务，我需要使用用户输入的先前数据设置所有输入，当然，如果该数据存在的话。如果切换组件，则应保留、存储和呈现数据。我打算将所有数据保存到组件中的一个对象中，但在页面刷新之后，所有内容都消失了。 我如何处理这个问题

我的代码如下：

    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

    @Component({
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.scss']
    })
    export class FormComponent implements OnInit {
      signUpForm: FormGroup;
      countries = [
        new FormControl('USA'),
        new FormControl('India')
      ];

      savedForm: {
        city: string,
        code: number,
        country: string,
        email: string,
        firstName: string,
        id: string,
        lastName: string,
        phone: number,
        state: string;
      }

      statesUSA = [new FormControl('New York'), new FormControl('California')];
      statesIndia = [new FormControl('Andhra Pradesh'), new FormControl('Goa')]

      citiesNY = [new FormControl('Albany'), new FormControl('New York City')];
      citiesCali = [new FormControl('Sacramento'), new FormControl('Los Angeles'), new FormControl('San Francisco')];
      citiesAndhra = [new FormControl('Visakhapatnam'), new FormControl('Amaravati')];
      citiesGoa = [new FormControl('Panaji'), new FormControl('Vasco da Gama')];

      @ViewChild('phoneInput', {static: false}) phoneInput: ElementRef;
      public mask:any = {
        mask: '+{38}(0__)000-00-00',
        lazy: false
      }

      constructor() { }

      ngOnInit() {
        this.signUpForm = new FormGroup({
          'firstName': new FormControl(null, [Validators.required, Validators.pattern(/^[а-яА-ЯёЁіІїЇ]{2,32}$/iu)]),
          'email': new FormControl(null, [Validators.required, Validators.email, Validators.pattern(/^\S{2,255}@\S+\.\S+$/iu)]),
          'country': new FormControl(null, Validators.required),
          'phone': new FormControl(null),
          'lastName': new FormControl(null, [Validators.required, Validators.pattern(/^[а-яА-ЯёЁіІїЇ]{2,32}$/iu)]),
          'id': new FormControl(null, [Validators.required, Validators.pattern(/\b[A-Za-z_]{5,30}\b/)]),
          'state': new FormControl(null, Validators.required),
          'city': new FormControl(null, Validators.required),
          'code': new FormControl(null, [Validators.pattern(/\b[A-Za-z_0-9]{1,10}\b/)])
        });

        this.signUpForm.setValue(this.savedForm);
      }


      onBlur(blur: boolean) {

      }

      onSubmit() {
        if(this.signUpForm.status === 'VALID') {
          this.

savedForm = this.signUpForm.value;
      console.log(this.savedForm);
    }
  }

  onReset() {

  }

  onChange() {
   (<FormGroup>this.signUpForm.get('state').value) = null;
   (<FormGroup>this.signUpForm.get('city').value) = null;
  }

  onOpen(controlName: string) {
  }
}

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef}；
从“@angular/forms”导入{FormGroup、FormControl、FormArray、Validators}；
@组成部分({
选择器：“应用程序窗体”，
templateUrl:'./form.component.html'，
样式URL:['./form.component.scss']
})
导出类FormComponent实现OnInit{
报名表格:FormGroup ;；
国家=[
新FormControl（“美国”），
新FormControl（“印度”）
];
保存格式：{
城市：字符串，
代码：编号，
国家：字符串，
电子邮件：string，
名字：string，
id:string，
姓氏：string，
电话号码:，
状态：字符串；
}
statesUSA=[new FormControl（'new York'）、new FormControl（'California'）；
statesIndia=[新FormControl（'Andhra Pradesh'）、新FormControl（'Goa'）]
citiesNY=[新表单控制（“奥尔巴尼”）、新表单控制（“纽约市”）；
citiesCali=[新表单控制（“萨克拉门托”）、新表单控制（“洛杉矶”）、新表单控制（“旧金山”）]；
citiesAndhra=[new FormControl（'Visakhapatnam'）、new FormControl（'Amaravati'）；
citiesGoa=[new FormControl（'Panaji'）、new FormControl（'Vasco da Gama'）；
@ViewChild（'phoneInput'，{static:false}）phoneInput:ElementRef；
公共掩码：任何={
掩码：'+{38}（0___）000-00-00'，
懒惰：错
}
构造函数（）{}
恩戈尼尼特（）{
this.signUpForm=新表单组({
“firstName”：新的FormControl（null，[Validators.required，Validators.pattern（/^[а-ЯА-ЯёіїЇ]{2,32}$/iu）]，
“电子邮件”：新的FormControl（null，[Validators.required，Validators.email，Validators.pattern（/^\S{2255}@\S+\.\S+$/iu）]，
“国家”：新FormControl（空，验证器。必需），
“电话”：新FormControl（空），
“lastName”：新的FormControl（null，[Validators.required，Validators.pattern（/^[а-ЯА-ЯёіїЇ]{2,32}$/iu）]，
'id'：新FormControl（null，[Validators.required，Validators.pattern（/\b[A-Za-z!]{5,30}\b/）），
“状态”：新FormControl（null，Validators.required），
“城市”：新的FormControl（null，Validators.required），
“代码”：新FormControl（null，[Validators.pattern（/\b[A-Za-z_0-9]{1,10}\b/））
});
this.signUpForm.setValue（this.savedForm）；
}
onBlur（模糊：布尔值）{
}
onSubmit（）{
if（this.signUpForm.status=='VALID'）{
这
savedForm=this.signUpForm.value；
console.log（this.savedForm）；
}
}
onReset（）{
}
onChange（）{
（this.signUpForm.get（'state'）.value）=null；
（this.signUpForm.get（'city'）.value）=null；
}
onOpen（控件名：字符串）{
}
}

您应该使用

服务

，组件不应该直接获取或保存数据，它们应该专注于显示数据并将数据访问委托给服务

步骤1

创建服务：

src/services/storeService.ts

从'@angular/core'导入{Injectable}；
@注射的({
providedIn:'根'，
})
导出类存储服务{
公共存储格式
}

当您在根级别提供服务时，Angular将创建StoreService的单个共享实例，并将其注入任何请求它的类中。在@Injectable元数据中注册提供程序还允许Angular通过删除服务来优化应用程序（如果最终证明该服务未被使用）

步骤2

在组件中，在构造函数中注入新创建的服务：

@组件({
选择器：“应用程序窗体”，
templateUrl:'./form.component.html'，
样式URL:['./form.component.scss']
})
导出类FormComponent{
报名表格:FormGroup ;；
构造函数（私有storeService:storeService）{}
恩戈尼尼特（）{
this.signUpForm=新表单组({
“firstName”：新的FormControl（null，[Validators.required，Validators.pattern（/^[а-ЯА-ЯёіїЇ]{2,32}$/iu）]，
“电子邮件”：新的FormControl（null，[Validators.required，Validators.email，Validators.pattern（/^\S{2255}@\S+\.\S+$/iu）]，
“国家”：新FormControl（空，验证器。必需），
“电话”：新FormControl（空），
“lastName”：新的FormControl（null，[Validators.required，Validators.pattern（/^[а-ЯА-ЯёіїЇ]{2,32}$/iu）]，
'id'：新FormControl（null，[Validators.required，Validators.pattern（/\b[A-Za-z!]{5,30}\b/）），
“状态”：新FormControl（null，Validators.required），
“城市”：新的FormControl（null，Validators.required），
“代码”：新FormControl（null，[Validators.pattern（/\b[A-Za-z_0-9]{1,10}\b/））
});
if（this.storeService.savedForm）this.signUpForm.setValue（this.storeService.savedForm）
}
onSubmit（）{
if（this.signUpForm.status=='VALID'）{
this.storeService.savedForm=this.signUpForm
}
}
}

非常感谢！我知道这些东西，但我对框架还是新手。如果你刷新页面，你的应用程序将被重新加载，包括你的服务，你的数据将丢失。如果你真的希望数据在重新加载后保持不变而不保存到数据库，你应该将其保存在

localstorage

当然，请随时询问你是否有任何问题。