时间戳

首页 > 解决方案 > 如何在 ngsubmit 方法中获取预填充的表单字段值？

angular - 如何在 ngsubmit 方法中获取预填充的表单字段值？

问题描述

我有一个包含 3 个字段的反应式表单，其中两个字段具有默认值，并且这些字段对用户禁用。用户必须输入第三个字段的值并提交表单。提交时，我只在 form.value 中获取用户输入的值

  constructor(private fb: FormBuilder, private userService: UserService) { 
    this.signUpForm = fb.group({
      'name': ['John Doe', Validators.required],
      'email': ['john@requantive.com', Validators.required],
      'phone': [null, Validators.required]
    });
  }

当我在 ngsubmit 方法上控制台记录 form.value 时，我得到的输出为

{电话：“123456”}电话：“123456” 原型：对象

标签： angularforms

解决方案

如果您使用 disabled 方法禁用 Formcontrol，请使用 getRawValue() 方法获取所有值，包括禁用的控件

app.component.ts

  this.signUpForm = fb.group({
      'name': [{value:'John Doe', disabled:true}, Validators.required],
      'email': [ {value:'john@requantive.com', disabled:true}, Validators.required],
      'phone': [null, Validators.required]
    });

app.component.html

<form [formGroup]="signUpForm">
  <input formControlName="name">
  <input formControlName="email">
  <input formControlName="phone">
</form>
formValue:{{signUpForm.getRawValue() | json}}

获取更多信息

示例 Stackblitz

推荐阅读