存储数据的角度反应形式答案

【问题标题】：Angular reactive forms storing data存储数据的角度反应形式
【发布时间】：2018-03-21 11:07:55
【问题描述】：

我以前使用过模板驱动的表单，但我有点困惑反应式表单如何将数据存储到我的数据库中。最初我只会使用 [(ngModel)]="user.date"。我现在如何在提交时存储数据？我已经建立了一个如下：

this.formGroup = this._formBuilder.group({
  formArray: this._formBuilder.array([
    this._formBuilder.group({
      dateFormCtrl: ['', Validators.required]
    }),
    this._formBuilder.group({
      emailFormCtrl: ['', Validators.email]
    }),
  ])
});

这是我要存储到数据库的输入示例：

<input formControlName="dateFormCtrl" matInput [matDatepicker]="picker" [max]="maxDate" [min]="minDate" placeholder="When is your event?"(click)="picker.open()" readonly>

ATM 我为模板驱动的表单构建了这个功能来存储数据：

 create() {
    this.http.post('http://localhost:3000/user', this.user).subscribe(res => { ............

【问题讨论】：

标签： angular angular-reactive-forms angular-forms

【解决方案1】：

你的表单应该是这样的

 this.form = this._formBuilder.group({
       dateFormCtrl: ['', Validators.required],
       emailFormCtrl: ['', Validators.email]
    });

你的提交方法应该是这样的

   onSubmit(): void{
       const formObj ={
        date: this.form.value.dateFormCtrl,
        email: this.form.value.emailFormCtrl,
       }
      this.http.post('http://localhost:3000/user', formObj).subscribe(res =>
    }

【讨论】：

【解决方案2】：

如果你想将表单数据动态保存到服务器，那么你可以按照下面的代码。这是最好的选择。

在您的 component.ts 文件中：

  form: FormGroup;
  payLoad = '';

    onSubmit() {
        this.payLoad = JSON.stringify(this.form.value);

        this.serverService.storeServers(this.payLoad)
        .subscribe(
          (response) => console.log(response),
          (error) => console.log(error)
        );

      }

在您的 service.ts 文件中：

constructor(private http: HttpClient) { }
  storeServers(payLoad: any) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    return  this.http.post(' ***Complete URL*** ', payLoad, httpOptions);
  }

【讨论】：