让我们假设,我有一个表单,其中包含名为:
Name, Id ,Address and MobileNo.
填写所有详细信息后,用户将移至下一页。
之后,如果我按返回按钮并移动到上一页,那么我希望已经填写了上次填写的数据。
如何使用 Angular JS?
您可以在Web 存储中或使用服务保留表单值。您需要做的是获取组件销毁生命周期挂钩上的表单值,并将其发送到服务或将其存储在 Web 存储中。
下面的解决方案是最简单的,因为服务存在于内存中并在实例的上下文中保持活动状态(例如,您所在的应用程序或浏览器选项卡(
服务网
@Injectable()
export class CacheService {
private formData: any;
constructor() { }
public setFormData(formData: any): void {
this.formData = formData;
}
public getFormData(): any {
return this.formData;
}
}
组件.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);
}
}