在angular2中获取表单的所有值

Question

我可以使用以下代码获取表单的值：

 <input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" #UserName class="form-control" mdbInputDirective>
<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(UserName.value)" mdbWavesEffect>Send
    <i class="fa fa-paper-plane-o ml-1"></i>
</button>

但我需要的是获取表单的所有值，这样我就可以这样做：

 <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(allFormValues)" mdbWavesEffect>Send
    <i class="fa fa-paper-plane-o ml-1"></i>
</button>

user: User;
ObSubmit(values) {
    user.UserName = values.UserName;
    user.Password = values.Password;
    ......
}

下面是整个代码：

 <div class="row">
  <div class="col-md-12 text-left">

    <form [formGroup]="subscriptionForm">
      <h3 style="color: gray; text-align: center;">Registration</h3>

      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
          </div>
          <br>
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="FirstName" id="FirstName" class="form-control" mdbInputDirective>
            <label for="FirstName">Your First name</label>
          </div>
        </div>
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user-secret prefix grey-text"></i>
            <input type="password" id="Password" formControlName="Password" class="form-control" mdbInputDirective>
            <label for="Password">Your password</label>
          </div>
          <br>
          <div class="md-form">
            <i class="fa fa-user-user prefix grey-text"></i>
            <input type="text" id="LastName" formControlName="LastName" class="form-control" mdbInputDirective>
            <label for="LastName">Your Last name</label>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-md-12">
          <div class="md-form">
            <i class="fa fa-envelope prefix grey-text"></i>
            <input type="email" id="Email" formControlName="Email" class="form-control" mdbInputDirective>
            <label for="Email">Your Email</label>
          </div>
          <br>
          {{subscriptionForm.value|json}}
          <br>
          <div class="text-center">
            <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()" mdbWavesEffect>Send
              <i class="fa fa-paper-plane-o ml-1"></i>
            </button>
          </div>
        </div>
      </div>
    </form>

  </div>
</div>

import { User } from './../../shared/user.model';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  subscriptionForm: FormGroup;
  user: User;

  constructor(private fb: FormBuilder) {
    this.subscriptionForm = fb.group({
      UserName: ['', Validators.required],
      Password: ['', Validators.required],
      Email:    ['', Validators.required, Validators.email],
      FirstName: ['', Validators.required],
      LastName: ['', Validators.required]
    });
  }

  ngOnInit() {
  }

  OnSubmit() {
   this.user = this.subscriptionForm.value;
   console.log(this.user);
  }

}

当我使用 #subscriptionForm="ngForm" 时出现错误。可能是因为 [formGroup]="subscriptionForm" 。我不知道什么是反应形式或其他形式。之后我会研究它，但你能帮我吗？谢谢你。

原文由 stack questions 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据您的相关输入进行 工作演示。

不要将响应式表单方法与模板驱动方法混合使用，否则你最终会遇到很多问题。在一个组件中遵循其中之一。当您遵循 Reactive 形式时，请仅遵循该形式。

这意味着您不能使用 #subscriptionForm="ngForm" 作为其模板驱动的表单方法。

---

我建议您使用反应式表单方法，这样您就可以通过这样做一次获得所有表单值

 user = userForm.value ;

但为此你需要自己制作板条箱并这样做

<form [formGroup]="userForm">
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

文件

 User:user;
 constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    //form control name should match with User class property name
    this.userForm= this.fb.group({
      name: ['', Validators.required ],
      street: '',
      ..other property
    });
  }

  submit() {
   this.user = userForm.value;
   //if property doesnt match then do this
   this.user.Name = this.userForm.get('name').value;
   ..do for all property
  }

无法详细解释，你应该遵循这个： https ://angular.io/guide/reactive-forms

原文由 Pranay Rana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

接受的答案已经过时并且不再适用于 Angular 8+，这可以很好地获取您的所有值：

 for (const field in this.myForm.controls) { // 'field' is a string
  console.log(this.myForm.controls[field].value);
}

原文由 Michelangelo 发布，翻译遵循 CC BY-SA 4.0 许可协议