FormControl在Angular 2中返回空值答案

【问题标题】：FormControl returning empty value in Angular 2FormControl在Angular 2中返回空值
【发布时间】：2017-12-01 09:55:26
【问题描述】：

我正在使用表格

<form [formGroup]="form">
    <input type="text" value={{userDetails.first_name}} formControlName = "firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>

这里userDetails.first_name 的值是汤姆。它在文本框内的 UI 上可见；但是当我提交表单时form.firstName 给了我空值。

【问题讨论】：

标签： angular angular2-forms angular2-services

【解决方案1】：

html

<form [formGroup]="form">
    <input type="text" formControlName="firstName">
    <button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>

组件

你可以这样设置值

this.form.patchValue({firstName:this.userDetails.first_name});

确保将表单组的实例创建到组件中

【讨论】：

【解决方案2】：

声明表单组：

private userForm: FormGroup;

像这样初始化用户表单：

  userForm = form.group({
          firstName:  [firstName, [Validators.required]]
        });

像这样在 HTML 中声明你的表单：

 <form class="example-form " [formGroup]="userForm"
                  (ngSubmit)="onSubmit(userForm)">
    <input type="text" value={{userDetails.firstName}} formControlName = 
      "firstName">
    <button type="submit" data-action="save"/>
 </form>

让你的 onSubmit() 方法像这样：

onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) {
    const firstName= value.firstName;
 }

【讨论】：

【解决方案3】：

要获取值，您应该检查 form.value.firstName 而不是 form.firstName。

要更好地了解表单的结构，请在提交表单时使用console.log(this.form)。

【讨论】：

我已经完成了 console.log ；仍然返回空值
好吧，如果console.log(this.form) 返回一个空值，可能还有其他问题。您是否也可以使用组件部分更新您的代码，而不仅仅是模板？
这是我的 表单初始化 this.form = new FormGroup({ firstname : new FormControl('',Validators.compose([Validators.required])) }); & 这是我的 onSubmit 方法 onSubmit = function (user) { console.log(user);