Angular 2 Form 帮助...后端功能答案

【问题标题】：Angular 2 Form help...backend functionalityAngular 2 Form 帮助...后端功能
【发布时间】：2019-05-14 23:25:37
【问题描述】：

我正在尝试为我在 Angular 2 项目中制作的表单编写后端函数。我对 Angular 很陌生，我在前端部分做得很好，但在做后端时却很吃力。我想填写字段，当您点击提交按钮时，将数据作为 json 对象发送到控制台

链接到表单https://stackblitz.com/edit/angular-mppcdu

【问题讨论】：

this.onboardForm.value() 能得到什么？
您确实没有在提供的代码中利用angular 的开箱即用表单功能。我建议阅读 angular.io/guide/reactive-forms 并尝试从 FormGroup 重新开始。

标签： html angular typescript angular2-forms

【解决方案1】：

你可以试试这个

在您的 example.ts 文件中

    newSampleForm: FormGroup;

           ngOnInit(){
              this.newSampleForm = new FormGroup({
                'userName':new FormControl(null),
                'password':new FormControl(null)
              })
             }


            onSubmit() {  
              let body = this.newSampleForm.value; 
              console.log(body);
           }

    or you can declare JSON object and assign form values to it.

    submitData :{
    'userName':string,
    'password':string
    }

    onSubmit() {
    this.submitData = {
    'userName':this.newSampleForm.get('userName').value,
    'password':this.newSampleForm.get('password').value
    }
    }

【讨论】：