FormControl 在 Angular 2 中返回空值

Question

我正在使用表格

<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

值是 Tom。它在 UI 上的文本框内可见；但是当我提交表单时，

form.firstName

给了我空值。

Answer 1

要获取该值，您应该检查

form.value.firstName

而不是

form.firstName

。

要更好地了解表单的结构，请在表单提交上执行

console.log(this.form)

。

Answer 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;
 }

Answer 3

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});

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