FormControl在Angular 2中返回空值

Posted 2023-03-13

【中文标题】FormControl在Angular 2中返回空值

【英文标题】：FormControl returning empty value in 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 给了我空值。

【参考方案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);