Angular Form 提交作为对象而不是值

Question

我正在创建基本的角度形式并onsubmit尝试检索形式值，但我的情况不是获得价值而是作为对象获得价值。

注意：复制了一些示例的代码。

你能告诉我为什么我得到的是对象而不是价值吗？

请找到我的以下代码：

html：

<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

成分：

onSubmit(value: any) {
  console.log("Form Value : " + value);
}

Answer 1

您userForm.value包含两个值，分别是name和email。

所以当你这样做时console.log(userForm.value);，它会返回如下内容：

{
  name: 'Surjeet',
  email: 'suri@yopmail.com'
}

要访问特定值，您可以执行以下操作：

1. userForm.value.name=> 它将返回'Surjeet'
2. userForm.value.email=> 它将返回'suri@yopmail.com'

那么你现在可以做什么：

Two things you can do in your case:

第一个：（通过其属性获取值）

onSubmit(value: any) {
  //get the value by its property
  console.log("Name: " + value.name);
  console.log("Email: " + value.email);
}

第二个：（只传递你需要的那些值）

//(ngSubmit)="onSubmit(userForm.value.name)"

<div class="container">
    <h2>  User Data </h2>
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm.value.name)">
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" ngModel>
      </div>
      <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" ngModel>
      </div>    
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>