如何使用角度单击保存按钮自动保存表单数据?

时间:2019-09-01 14:45:49

标签: angular angular7 angular-reactive-forms angular8 autosave

我想保存表单数据,我尝试了以下操作,但出现错误:Property 'subscribe' does not exist on type 'MonoTypeOperatorFunction<unknown>'

页面上没有提交按钮。当用户在表单中进行更改时,数据应自动保存。我不确定我在哪里做错了?请让我知道如何实现这一目标。谢谢。

html:

<form [formGroup]="addForm" >
<ul *ngFor="let item of details ">
    <li type="textarea" (change)="autoSaveValues($event.target.value)"></li>
</ul>
</form>

component.ts:

export class AppComponent implements OnInit {
addForm: FormGroup;
constructor(private formBuilder: FormBuilder, private route: ActivatedRoute, private router: Router, private employeeService: EmployeeService){}

ngOnInit() {

this.addForm = this.formBuilder.group({
      id: [],
      title: ['', Validators.required],
      description: ['', Validators.required]
    });


     this.addForm.autoSaveValues.pipe(debounceTime(500).subscribe((val) => {
            if (this.addForm.valid && this.addForm.dirty) {
                this.createEmployee(val);
                this.addForm.reset()
           }
        }));
}

 createEmployee(currentEmployee: Employee) {
    if (currentEmployee.id === null) {
        this.employeeService.createEmployee(currentEmployee).subscribe(
        (data) => {
          this.employeeService.getAllEmployee();
        });
    }
    else {
        this.employeeService.updateEmployee(currentEmployee).subscribe(
        (data) => {
          this.employeeService.getAllEmployee();
        });
    }
  }
}

0 个答案:

没有答案