Question

让我们假设，我有一个包含多个字段的表单：

Name, Id ,Address and MobileNo.

填写完所有详细信息后，用户将移至下一页。

之后，如果我按下后退按钮并移动到上一页，那么我希望我上次填写的数据已经填满。

如何使用Angular JS？

Answer 1

您可以将表单值保留在网络存储空间中或使用服务。您需要做的是获取组件销毁生命周期钩子上的表单值并将其发送到服务或将其存储在webstorage中。

<强> Service.ts

@Injectable()
export class CacheService {

  private formData: any;

  constructor() { }

  public setFormData(formData: any): void {
    this.formData = formData;
  }

  public getFormData(): any {
    return this.formData;  
  }

}

<强> Component.ts

@Component({
  selector: 'app-test',
  templateUrl: './template.html',
  styleUrls: ['./styles.scss']
})
export class TestComponent implements OnInit, OnDestroy {

  public form: FormGroup;

  constructor(private cacheService: CacheService) {
  }

  ngOnInit() {
    this.form.patchValue({
      this.cacheService.getFormData();
    });
  }

  public ngOnDestroy(): void {
    this.cacheService.setFormData(this.form.value);
  }
}

即使我返回上一页，如何保持表单数据填写？

1 个答案: